Question

我想将jQuery代码从live()函数转换为具有相同功能的on()函数。

如果我点击一个段落创建另一个段落，当我点击以跨越“删除”时段落将被删除。

如果我将live()更改为on()，则会创建段落，如果我点击第一段而不是之前创建的每个段落。

HTML代码

<body>
<p>Paragraph 1</p>

</body>

JS代码

$(document).ready(function() {
    var i = 2;
    $("p").live("click", function() {
        $("<p>Paragraph " + i++ +" <span> Delete</span></p>").insertAfter(this);
    });
    $("span").live("click", function() {
        $(this).parent().remove();
    });
});

如果我想要顺利隐藏段落，请使用以下代码：

$(this).on("click", "span",  function(){
$(this).parent().hide("slow",function(){
    $(this).remove();
  });
})

但删除段落后，而不是新段落。

请参阅此代码：http://jsfiddle.net/a8e9v2m5/2/

Answer 1

这是在doc：http://api.jquery.com/live/

中

$（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7 +

所以，

$(document).on("click", "p", function() {
    $("<p>Paragraph " + i+++" <span> Delete</span></p>").insertAfter(this);
});
$(document).on("click", "span", function() {
    $(this).parent().remove();
});

Answer 2

.on()使用稍微不同的语法。不要选择要观看的元素，而是选择具有滤镜选择器的父元素。

  $(document).ready(function(){ 
var i=2;
$(document).on("click", "p", function(){
    $("<p>Paragraph "+ i++ +" <span> Delete</span></p>").insertAfter(this);

})
$(document).on("click", "span", function(){
    $(this).parent().remove();
})
})

有关详细信息，请参阅documentation for .on()。

Answer 3

更具体针对span标记

下的p

$(document).on("click", 'p', function(){
    $("<p>Paragraph "+ i++ +" <span> Delete</span></p>").insertAfter(this);

});
$(document).on("click", 'p span', function(){
    $(this).parent().remove();
});

Answer 4

使用动态生成的DOM元素时，可以使用“on”而不是“live”，但不能完全相同。您还必须绑定选择器 -

看，如果有效 -

$(document).ready(function () {
    var colori = ["AntiqueWhite", "Aquamarine", "BurlyWood", "Chartreuse", "Coral", "DarkSalmon", "DodgerBlue", "GreenYellow", "LightBlue"];
    var i = 2;
    $(this).on("click", "p", function () {
        $("<p>Paragraph " + i++ + " <span> Sterge</span></p>").insertAfter(this);

        $(this).next().css("background-color", colori[i])

    });
    $(this).on("click", "span", function () {
        $(this).parent().remove();
    });
});

如何改变生活＆＃34;到＆＃34; on＆＃34;在jquery的这个脚本中获得相同的功能

4 个答案: