0

<ul>我一直在考虑如何在 a自己的 s上向 '.click()' 事件添加一个函数<li>。第一件事很简单（它是近似的，我显然不是 jquery 专业人士）。

$(document).ready(
    function () {
        $('.prodli').each().click( //prodli is my class I set on every <li>
            function () {
                //blabla
            }
        );
    }
);

但！因为总有一个但在某处......事情是这些<li>可以通过另一个jquery脚本添加。

因此，如果我在此列表中应用我在上面编写的先前脚本：

<ul>
    <li productId="1" class="prodli">Product 1</li>
    <li productId="2" class="prodli">Product 2</li>
    <li productId="3" class="prodli">Product 3</li>
    <li productId="4" class="prodli">Product 4</li>
    <li productId="5" class="prodli">Product 5</li>
    <li productId="6" class="prodli">Product 6</li>
</ul>

我想如果使用其他一些脚本我将列表更新为类似

<ul>
    <li productId="455" class="prodli">Product 455</li>
    <li productId="48" class="prodli">Product 48</li>
    <li productId="7" class="prodli">Product 7</li>
</ul>

我应该重新调用我的第一个脚本来将click()函数应用于这些新的<li>，对吗？

有没有办法以更全球化的方式做到这一点？我的意思是“每次单击具有类“prodli”的元素时，应用此功能”？或者像<li>这个特定<ul>列表中的每一个？

非常感谢你们！

4

1 回答 1

2

您可以将 click 事件委托给父ul元素（或任何其他祖先）。由于 DOM 事件倾向于在树中冒泡，因此对后代元素的任何点击都将到达ul并可以在那里处理。

jQuery 提供了on执行此操作的方法（如果您使用的是旧版本的 jQuery，则需要delegate代替on）：

$("ul").on("click", ".prodli", function() {
    //Do stuff
});

这意味着ul可以随心所欲地改变孩子。这不会有什么不同。任何点击任何后代ul都会冒泡到ul. jQuery 检查单击是否源自与选择器匹配的元素（在本例中为任何.prodli元素），如果是，则执行事件处理程序。

于 2012-04-19T10:36:01.263 回答