jquery - Jquery On 和 Live Confusion

Question

看看这些示例代码：

我们有

​    <div class="ex"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

我们有 jquery 代码；

1-开

$('.ex').append("<div class='text'>object-1</div>");

$('.text').on({

    hover: function(e) {
        if (e.type === "mouseenter")
        {      
            $(this).css('color','green');
        }
        else if (e.type === "mouseleave")
        {
            $(this).css('color','black'); 
        }
    },
    click: function()
    {
        $(this).css('color','red');
    }

});

$('.ex').append("<div class='text'>object-2</div>");

2-带直播

$('.ex').append("<div class='text'>object-1</div>");

$('.text').live({

    hover: function(e) {
        if (e.type === "mouseenter")
        {      
            $(this).css('color','green');
        }
        else if (e.type === "mouseleave")
        {
            $(this).css('color','black'); 
        }
    },
    click: function()
    {
        $(this).css('color','red');
    }

});

$('.ex').append("<div class='text'>object-2</div>");

问题是 jquery 不能使用 .on 处理 object-2。.live 已弃用，应避免使用。但是 .on 不适用于动态内容。如何使用 .on 在动态内容上运行 jquery 代码？

Answer 1

.on确实适用于动态内容，但你必须使用它的不同版本，就像这样......

$("static-scope-selector").on("event", "dynamic-content-selector", function{...});

因此，使用您的标记，您将使用如下内容：

$("div.ex").on("hover", ".text", function(e) {...})
        .on("click", ".text", function(e) {...});