0

给定以下标记：

<div id="nodes">
    <ul>
        <li><a href="#">Colors</a>
            <ul>
                <li><a href="#">Red</a></li>
                <li><a href="#">Green</a></li>
                <li><a href="#">Blue</a></li>
            </ul>
        </li>
        <li><a href="#">Sizes</a></li>
        <li><a href="#">Material</a></li>
    </ul>
</div>

我写了一个jQuery函数来添加兄弟节点：

$("#nodes ul li").click(function(e) {
    addSibling(this, 'new one');
    e.stopPropagation();
});

function addSibling(selector, content){
    var markup='<li><a href="#">' + content + '</a></li>';
    $(selector).parent().append(markup);
}

起初它似乎工作得很好，只要我点击原始节点。例如，如果我点击“蓝色”，我会得到：

<div id="nodes">
    <ul>
        <li><a href="#">Colors</a>
            <ul>
                <li><a href="#">Red</a></li>
                <li><a href="#">Green</a></li>
                <li><a href="#">Blue</a></li>
                <li><a href="#">new node</a></li>
            </ul>
        </li>
        <li><a href="#">Sizes</a></li>
        <li><a href="#">Material</a></li>
    </ul>
</div>

但是，当我单击新节点时，它没有将新节点作为同级节点，而是向上一级（即“颜色”、“大小”和“材料”的同级节点）。查看 jQuery 生成的标记，我看不出有任何区别，所以我很困惑为什么新节点的行为与原始节点不同。谢谢。

4

4 回答 4

2

我建议：

$("#nodes ul").click(function (e) {
    addSibling(e.target, 'new one');
    e.stopPropagation();
});

function addSibling(selector, content) {
    var markup = '<li><a href="#">' + content + '</a></li>';
    $(selector).parent().append(markup);
}

JS 小提琴演示。

这会将点击处理程序绑定到ul元素，而不是this使用e.target，这是在ul. 这意味着您可以避免没有将 click 事件处理程序绑定到新添加的元素的问题。

于 2013-04-20T21:26:12.693 回答
0

原因是 jquery 将您的点击回调注册到已经存在的对象。当您单击新创建的 li 时，它只会冒泡并发射更高的级别。

除此之外：你有 class="nodes" 并且你想要 id="nodes"。

如何解决？尝试将您的点击注册到 ul（不是 li）并在 addSibling 中删除父级。

于 2013-04-20T21:19:17.320 回答
0

因为当您将新节点添加到 DOM 时，您不会将点击事件附加到它，所以底层的“li”正在注册点击并将节点附加到该节点。为了解决这个问题，在您的 addSibling 函数中，在您创建新节点后，将单击事件附加到它。

于 2013-04-20T21:22:59.750 回答
0

您的问题是您新创建<li>的 s 没有附加事件处理程序。那是因为当您$("#nodes ul li").click(...)只调用适合选择器的元素时，会获得附加到它们的处理程序。一旦调用了该函数，当新元素添加到 DOM 时将不会再次调用它。结果，您对 new<li>的点击“冒泡”，直到它点击一个<li>已经有事件处理程序的。

您可以通过使用委托单击处理程序来解决此问题，而不是直接在元素上：

$("#nodes").on("click","li",function(e) {
    addSibling(this, 'new one');
    e.stopPropagation();
});

其工作方式如下：
您仅将一个单击处理程序附加到#nodes元素。当您单击元素<li>内部的任何nodes内容时，将触发该功能。并且由于它适用于元素<li>内部的所有 s #nodes，因此它们是否是动态创建的并不重要。

于 2013-04-20T21:25:22.247 回答