jQuery - live() 不能与附加 div 中的 next() 一起使用

Posted 2023-02-25

【中文标题】jQuery - live() 不能与附加 div 中的 next() 一起使用

【英文标题】：jQuery - live() not working with next() from appended div

【发布时间】：2011-05-26 17:09:49

【问题描述】：

这个元素的目的是拥有一个完全基于简单无序列表的可折叠导航系统。默认情况下，所有嵌套列表都将被隐藏，并且 .toggle div（按钮）附加到包含嵌套列表的 li 项目。然后这些 .toggle div 应该隐藏/显示嵌套列表，并将一个类应用于切换按钮。

我已经通过手动插入 .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");
    
);
);

【问题讨论】：

哪个元素的 id 为 #nav？此外，您将toggle div 附加到li 的末尾。

很抱歉 - 刚刚包含了包装无序列表的#nav div。也想通了！我需要将 .next() 切换到 .prev() 因为它没有被附加到我手动放置的位置 - 一个愚蠢的疏忽。感谢您指出这一点！

【参考方案1】：

试试这个：

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

如果将选择所有直接嵌套在<li>元素中的<ul>元素，并在每个元素前面添加<div>。

看看演示：http://jsfiddle.net/xXRSZ/1/

【讨论】：

这是我尝试做的一个完美的例子。似乎这种方法可以与原始代码一起使用，并且绝对是我所做的附加/上一个更改的干净替代方案。感谢您的帮助！

【参考方案2】：

您要做的是在切换 div 之前添加，而不是添加它。

更新您的代码以使用prepend 函数：

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

Working example

【讨论】：

我认为张贴者想要切换<ul>，而不是主播。只需添加一些 CSS 并给 <li>s 留一些左边距，看看有什么问题。