0

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

首先，我的想法是为此添加 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")));
});​

感谢您的所有回复。

4

2 回答 2

3

您只需要使用事件委托，on()方法是：

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

JS 小提琴演示。

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

如果您使用的是 jQuery 1.7（或更高版本）on()，则应使用 jQuery < 1.7 的版本delegate()（它或多或少做同样的事情，但反转事件列表和选择器参数）：

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

JS 小提琴演示。

参考：

于 2012-09-28T21:36:08.900 回答
0

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

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

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

但是当您创建一个新元素时，该元素不会附加任何事件。

您在这里有两个选择。要么委托您的活动，即；将事件侦听器添加到元素的祖先 ..

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

第二种方法

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();
});​

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

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

小提琴

第二种方法

于 2012-09-28T21:41:41.460 回答