Jquery On和L​​ive Confusion

Question

请查看以下示例代码：

我们有

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

我们有jquery代码;

1-With On

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