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

Question

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

Я проверил этот код, вручную вставив .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:

$(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");
    }
});
});

Answer 1

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

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

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

Посмотрите демоверсию: http://jsfiddle.net/xXRSZ/1/

Answer 2

То, что вы хотите сделать, это добавить тумблер div, а не добавлять его.

Обновите код для использования функции prepend:

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

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