Question

如果这个问题重复，我道歉。

我正在尝试向DIV添加一个按钮，该按钮将触发另一个jQuery脚本。但是，我无法触发附加按钮。我很想知道我做错了什么。我试图解开并使用'on'而不是'click'，我仍然遇到问题。

你可以在这里看到我的小提琴：http://jsfiddle.net/Y82ZK/1/

单击“添加”按钮时，“删除”按钮不会触发。出于某种原因，我的Firefox Firebug今天对我有任何帮助。

JS小提琴中使用的代码：

HTML：

<input type="button" id="add" value="Add" />
<div id="container">

</div>

的Javascript / jQuery的：

var count = 0;
$('#add').click(function(){
   count++;
$('#container').append('<div class="section' + count + '">This is count ' + count + '. <input type="button" id="remove" value="Remove" /></div>');

});

$('#remove').click(function(){
   var row = $(this).attr("class");
   $(row).remove();
   count--;

});

关于为什么附加按钮不会触发的任何想法？

Answer 1

是的，你应该改变你的代码：

$('#remove').click(function(){

到此：

$(document).on('click','#remove', function(){

Answer 2

由于没有人解释原因，生病了。

让我们从基础开始。使用$('#remove').click()与使用$('#remove').on('click', function(){})相同，这是绑定事件的首选方式。

但是使用这样的事件是绑定直接事件。这意味着它会在元素本身上添加事件。它比委托事件快得多（后来会出现问题），但缺点是在应用绑定时必须存在目标元素。因此，这就是我们在绑定之前使用DOM就绪处理程序的原因。

委托事件是另一种事件。我们这样使用它：$(document).on(click, '#element', function(){})。 document应该是性能增益最接近的静态（未动态添加）元素。这种类型的事件来自目标（document），并获取包含该事件的子目标。

实际上它更慢，因为它不是直接的，但它具有处理动态元素的优势。

此处提供更多信息：http://api.jquery.com/on/

要回答您的问题，您可以这样做：

$('#container').append('<div class="section' + count + '">This is count ' + count + '. <input type="button" id="remove" value="Remove" /></div>');

$('#remove').click(function(){ //Bind the event after adding it.
    var row = $(this).attr("class");
    $(row).remove();
    count--;

});

或添加委派活动：

$('#container').on('click', '#remove', function(){
    var row = $(this).attr("class");
    $(row).remove();
    count--;

});

Answer 3

创建元素时创建事件。

<强> JS

var count = 0;
$('#add').click(function () {
    count++;
    var removeButton = $('<div id="section' + count + '">This is count ' + count + '. <input type="button" class="remove" value="Remove" /></div>');
    removeButton.click(function () {
        this.remove();
        count--;
    });
    $('#container').append(removeButton);
});

jsfiddle：http://jsfiddle.net/howderek/Y82ZK/5/

Answer 4

您需要使用事件委派。旅行>

$("body").on('click', '#remove', function(){
   // stuff here
});

Answer 5

使用

$('#remove').click(function(){

当JS代码运行时，将点击操作挂钩到ID为#remove的任何元素，这不会针对任何动态添加的元素，您需要使用

$(document).on('click','#remove', function(){

方法，这将主动轮询您的HTML以查找出现ID为#remove的任何新元素，允许您将点击功能挂钩到动态添加的元素。

Answer 6

您可能不应该使用相同的ID，因为每个元素的ID必须是唯一的。使用类来执行选择

jQuery - 为什么附加到文档的按钮不会触发？

6 个答案:

jsfiddle：http://jsfiddle.net/howderek/Y82ZK/5/