javascript - jquery .on click 不适用于后来添加的元素

Question

我有以下问题。据我所知，使用 .on 函数应该将事件监听器添加到所选元素，即使它们目前可能不存在。我正在替换我页面上的元素，在替换它们之后，事件监听器不会附加到它们。 那我哪里弄错了？

这是不起作用的代码:

HTML:

<nav>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</nav>

<button>change</button>

javascript:

$(function() {
    $("ul li").on("click", function() {
        $(this).css({"color": "red"});
    });

    $("button").on("click", function() {
        $("ul li").css({"color": "black"});

        var html = $("nav").html();
        $("nav").html(html);
    });
});

fiddle :http://jsfiddle.net/Q48db/

Answer 1

仅使用 .on()不会使事件处理程序处理动态元素，您需要使用 event delegation on()

格式

事件委托(delegate)的格式是

$(static-ancestor).on(event, dynamic-element-selector, handler)

所以

$("nav").on("click", 'li', function () {
    $(this).css({
        "color": "red"
    });
});

演示:Fiddle

在您的情况下，nav 元素是静态元素，因为您正在更改其内容，因此您可以将处理程序绑定(bind)到它，并且您希望为 li 添加点击处理程序 元素传递 li 作为动态元素选择器