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-带Live

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