jQuery - live() не работает с next() из добавленного div

#jquery #append #live #next

#jquery #добавить #ЖИВЫЕ КОНЦЕРТЫ #Далее

Вопрос:

Цель этого элемента — создать складную навигационную систему, полностью основанную на простом неупорядоченном списке. По умолчанию все вложенные списки будут скрыты, а .toggle divs (кнопки) прикреплены к элементам li, которые содержат вложенный список. Затем эти .toggle divs должны скрывать / показывать вложенный список, а также применять класс к кнопке переключения.

Я протестировал этот код, вручную вставив .toggle div (расположение указано с помощью [toggle div]), и все работает отлично. Однако, когда он добавляется с помощью append(), кажется, что ничего не работает. Кто-нибудь знает, что может быть причиной этой проблемы? Любая помощь была бы высоко оценена — спасибо!

HTML:

 <div id="nav">
<ul>
<li><a href="#">nav item</a>[toggle div]
    <ul>
        <li><a href="#">nav item</a></li>
        <li><a href="#">nav item</a></li>
        <li><a href="#">nav item</a>[toggle div]
            <ul>
                <li><a href="#">nav item</a></li>
                <li><a href="#">nav item</a></li>
                <li><a href="#">nav item</a></li>
            </ul>
        </li>
        <li><a href="#">nav item</a></li>
    </ul>
</li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</div>

jQuery — jQuery — запрос:

 $(function(){
$("#nav ul li").has("ul").append("<div class='toggle'></div>");
$(".toggle").live("click", function() {
    if($(this).next().is(":hidden")) {
        $(this).next().show();
        $(this).addClass("toggled");
    } else {
        $(this).next().hide();
        $(this).removeClass("toggled");
    }
});
});

1. Какой элемент имеет идентификатор #nav ? Кроме того, вы добавляете toggle div в конец li .

2. Извините за это — только что включил #nav div, который завершает неупорядоченный список. Тоже это понял! Мне нужно было переключить .next () на .prev(), поскольку он не добавляется туда, куда я поместил его вручную — глупая оплошность. Спасибо, что указали на это!

Ответ №1:

Попробуйте это:

 $("#nav li > ul").before('<div class="toggle"></div>');

If выделит все <ul> элементы, которые непосредственно вложены в <li> элементы, и добавит <div> перед каждым из них.

Взгляните на демонстрацию:http://jsfiddle.net/xXRSZ/1 /

1. Это прекрасный пример того, что я пытался сделать. Похоже, что этот метод будет работать с исходным кодом и, безусловно, является чистой альтернативой внесенным мной изменениям append / prev. Спасибо за помощь!

Ответ №2:

Что вы хотите сделать, это добавить переключатель div, а не добавлять его.

Обновите свой код, чтобы использовать prepend функцию:

 $("#nav ul li").has("ul").prepend("<div class='toggle'>[toggle div]</div>");

Рабочий пример