Question

我正在尝试制作具有添加和删除元素功能的简单列表。现在我正在为每个列表元素对象（现有的和添加的）添加和执行一个简单的操作。不幸的是，我遇到了一些困难。我可以修改在开头创建的对象，但不能修改在“网页工作”期间添加的对象。

首先，我的想法是为此添加AJAX，但我不认为这是最简单的方法。

我想前段时间（我不记得在哪里）我读了如何使这项工作，但现在我不知道。如果有人能帮助我，或者至少给出一个很好的解释，我会很高兴。

到目前为止，我已经做了很多事情（这主要是一个划痕，但主要的想法就在其中）：http://jsfiddle.net/sebap123/pAZ7H/0

$("li").click(function() {
    $(this).text("new text");
});
$("#addButton").click(function() {
    $(".list").append(
    $('<li>').append($('<span>').append("added li")));
});

感谢您的回复。

Answer 1

您只需要使用on()方法使用事件委派：

$("ul").on('click','li', function() {
    $(this).text("OK");
});

JS Fiddle demo

您遇到的问题是jQuery只能直接将事件绑定到已存在的元素（存在于事件绑定点）; on()方法将操作绑定到添加了新内容的元素（或新添加元素的祖先元素），标识要侦听的事件'click'（以空格分隔的列表）事件），匹配选择器（li），然后该函数执行所需的操作。

如果您正在使用jQuery 1.7（或更高版本）on()应该使用，对于jQuery的版本＆lt; 1.7，应该使用delegate()（它或多或少地做同样的事情，但是反转事件列表和选择器参数）：

$("ul").delegate('li', 'click', function() {
    $(this).text("OK");
});

JS Fiddle demo

参考文献：

delegate()。
on()。

Answer 2

这里需要使用事件委托.. 试试这个

$("ul").on('click' , 'li', function() {
    $(this).text("OK");
});

上一次点击事件的问题是事件仅附加到页面上的当前元素..

但是当你创建一个新元素时，没有事件附加到元素上。

这里有两种选择..要么委托你的事件，要么;将事件listerner添加到元素的祖先..

或者在创建元素后添加事件..

第二种方法

var clickEvent = function() {
    $('li').unbind().on('click', function() {
        $(this).text("OK");
    });
}

clickEvent();

$("#addButton").click(function() {
    $(".list").append(
    $('<li>').append($('<span>').append("Press me - I am new!")));
    clickEvent();
});

在第二种方法中，一旦添加了新元素，就会绑定解绑定并将新事件绑定到所有元素。

绑定和再次重新绑定事件是一种糟糕的设计模式

FIDDLE

2nd APPROACH

Javascript，jQuery - 如何签名操作才能创建对象？

2 个答案: