Javascript 单击“不使用后来添加的元素”

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

以下是不起作用的代码：

html:

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

<button>change</button>

fiddle:

仅使用不会使事件处理程序处理动态元素，您需要使用

on（）

活动委派的格式为

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

所以

演示：

在您的情况下，

nav

元素是静态元素，因为您正在更改其内容，以便可以将处理程序绑定到它，并且由于您希望将

li

元素的单击处理程序传递给

li

作为动态元素选择器，因此需要对动态添加的元素使用：

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

使用：

---

了解事件委派的示例：

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

你需要授权

$("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);
});

---

可能重复的@MatúšDúbrava请参阅更新。。。它应该是

$（'nav'）。在（…）

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

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

$("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);
});