Добавление элементов при нажатии
День добрый!
Возникла проблемка небольшая, прошу помочь решить ее. У меня есть код <ul id="cat01"> Категории <li id="pcat01">Подкатегории</li> </ul> я хочу сделать чтоб при нажатии на категориию или кнопку появлялась еще одна категория, но с следующим ид cat02 и при нажатии на подкатегорию появлялись подкатегории тоже со следующим ид pcat="pcat02" и так чтоб можно было добавлять и добавлять. Сейчас написал вот такой вот код для добавления
<script type="text/javascript">
$(document).ready(function(){
$("li").click(function(){
$("li").append("<li> Hello!</li>");
});
$("ul").click(function(){
$("ul").append("<ul> Hello!</ul>");
});
});
</script>
Но он почему-то добавляет не по одной категории и подкатегории, а сразу по многу и ид там не меняется. Подскажите плизз как можно реализовать задачу? |
а чего ты li засовываешь в li, ul - в ul? Где ты меняешь id? И почитай про всплывание событий
|
Исправил на это
<script type="text/javascript">
$(document).ready(function(){
$("ul").click(function(){
$("li").append("<ul> Hello!</ul>");
});
});
</script>
Но почему-то добавляется по 2 <ul> Hello!</ul> при клике А вот насчет как менять ид, хотел узнать, как это можно сделать? Подскажите плиззз! |
почему добавляются 2 <ul> Hello!</ul> из твоего кода непонятно. Либо дай ссылку на страничку, либо прикрепи к сообщению
также непонятно, почему ты в ul текст записываешь, там только li могут быть. И почему ты ul в li добавляешь. Тебе это нужно? Я думал тебе нужно добавлять еще одну такую же категорию, а не создавать подкатегорию (категории, на которой кликнули) по поводу менять id, а точнее назначать '<ul id="cat'+id+'" Hello!</ul>' чтобы вычислить id тебе надо будет найти уже существующие категории, определить их максимальный id и увеличить его на единицу |
Вот вроде с добавлением разобрался, но как можно сделать чтоб подкатегория добавлялась именно для выделенной категории? Сейчас добавляется только для первой
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// добавляем действия для кнопки Добавить категорию
$("#addCat").click(function(){
$("ul:first").after("<ul><li><label><input type='checkbox' />Новая категория</label></li></ul>");
}); //--закрытие addCat click
// добавляем действие для кнопки Добавить подкатегорию
$("#addPcat").click(function(){
$("li:first").after("<ul><li><label><input type='checkbox' />Новая подкатегория</label></li></ul>");
}); //--закрытие addPcat click
}); //--закрытие document ready
</script>
</head>
<body>
<button id="addCat">Добавить категорию</button>
<button id="addPcat">Добавить подкатегорию</button>
<ul id="tree">
<li>
<label>
<input type="checkbox" />Категория 01
</label>
</li>
<li>
<label>
<input type="checkbox" />Котегория 02
</label>
<ul>
<li>
<label>
<input type="checkbox" />Подкатегория 01
</label>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
например, с помощью :checked находишь выделенный checkbox, по нему находишь родительский ul и добавляешь. То же самое, если выделено более одного checkbox'а
только интерфейс какой-то странный. Я бы кнопки добавления как последний элемент списка указывал |
Боксы выборки это я так для примера указал
На самом деле их не будет <body> <button id="addCat">Добавить категорию</button> <button id="addPcat">Добавить подкатегорию</button> <button id="dellPcat">Удалить подкатегорию</button> <ul id="tree"> <li> <label> Категория 01 </label> </li> <li> <label> Котегория 02 </label> <ul> <li> <label> Подкатегория 01 </label> </li> </ul> </li> </ul> </body> Можно как-то определить какой выбран <label> к примеру? Чтоб уже к нему добавлять? Или что-то в этом роде? |
Подскажите плиззз почему могут не добавляться подкатегории в списке?
Именно не добавляются к тем, которые создает скрипт, к тем которые были изначально добавление работает. Селекторы вроде бы пробовал менять , все равно не получается победить (( Вот страничка с этим скриптом http://jukrim.ee/jquery/ |
click добавляет обработчики к имеющимся на данный момент элементам. Попробуй live
кроме того не используй селекторы, которые ищут по всему дереву, ограничь их, например, "#tree li label". Да и li здесь лишняя а вообще я бы назначил обработчик одному родительскому элементу (не проверял, могут быть ошибки)
$('#tree').click( function(e){
$('label.selected', this).removeClass('selected');
$(e.target).addClass('selected');
});
или даже
$('#tree').click( function(e){
$(this.arguments.callee.target).removeClass('selected');
$(e.target).addClass('selected');
this.arguments.callee.target = e.target;
});
|
Большое спасибо!
Заработало теперь, не догадался бы ни за что что дело в этом click. А еще вопросик не могли бы уточнить плизз насчет идентификации создаваемых элементов? ------------------------------------------------------------- по поводу менять id, а точнее назначать '<ul id="cat'+id+'" Hello!</ul>' чтобы вычислить id тебе надо будет найти уже существующие категории, определить их максимальный id и увеличить его на единицу ------------------------------------------------------------- как это можно реализовать? что-то я попробовал но ничего не получилось (( |
| Часовой пояс GMT +3, время: 04:38. |