Question

我有这个<li>，当你点击它时，它会在它之前创建另一个<li>（有一堆类应用于它），这一切都很有效。问题是，我无法修改（通过jQuery）新创建的<li>元素，因为它们是动态创建的。

目前，它设置为：

 $(".foo").on("click", function() {
//Blah blah blah
});

我已经尝试过以下代码，但仍无效。

$(".foo").on("click", function() {
//Blah blah blah
});

提前感谢您的帮助！

Answer 1

因为li是为jQuery v1.7动态创建的，所以现在和将来都会为与当前选择器匹配的所有元素附加一个事件处理程序。

$(document).on("click", ".foo", function() {
    //Blah blah blah
});

基本上如果您使用1.7及更高版本，则on的语法略有不正确。

Answer 2

JQuery 1.7 +

我认为它应该适用于on()函数：

$(".foo").on('click', function() {
    // more code
});

其他

$(".foo").live('click', function(){ // more code }

Answer 3

将事件绑定到已存在的父元素：

$('#parent').on('click', '.foo', function() {
    ...
});

'#parent'可能是<ul>元素的选择器。

Answer 4

尝试这种方法：

  $("ul").on('mouseup', '.item', function() {
    $(this).toggleClass("completed");
  });

JS Fiddle demo

您遇到的问题是.item元素在mouseup事件绑定到它们时不存在于DOM中。此方法将mouseup绑定到所存在的ul，并使用on()方法侦听该事件，如果目标元素与选择器匹配（.item）传递给它实现匿名函数的方法（传递给方法的第三个参数）。

如果目标不匹配该选择器，那么该事件不会做任何事情或继续通过祖先传播。

Answer 5

这对你有用吗？：

$(function() {

  var task =
    $('<li class="editable todo-item">Double Click to Edit</li>');

  $(document).on('click', '.todo-new', function() {
    $('.todo-new').before(task);
  });

  $(document).on('dblclick', '.todo-item', function() {
    $(this).toggleClass("todo-completed");
  });

});

修改动态创建（jQuery）元素

5 个答案: