jquery .on点击不使用以后添加的元素

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);
    });
});

小提琴： http ： //jsfiddle.net/Q48db/

Answer 1

仅使用.on（）不会使事件处理程序处理动态元素，您需要使用on()的事件委托格式

事件委派的格式是

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

所以

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

演示： 小提琴

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

Answer 2

您需要为动态添加的元素使用事件委派 ：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

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

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

更新小提琴

Answer 3

使用事件委派方法 ：

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

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

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

---

理解事件委派的示例：

// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

Answer 4

你需要委托。

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

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

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

演示小提琴