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

演示：event delegation

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

Answer 2

您需要使用 event delegation 来动态添加元素：

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

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

<强> Updated Fiddle

Answer 3

使用event Delegation method：

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

demo fiddle

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

4 个答案: