jquery - jQuery：创建的按钮具有第一个按钮的效果

Question

我有一些代码：

$("button").click(function(){
  $(this).after('<button>click</button>');
});

和按钮：

<button>click</button>  

当我单击第一个按钮时，会创建一个按钮。然后我单击第二个按钮，没有发生任何事情，而是创建另一个单击。只有当我单击我的时， 我first button才会创建一个按钮能够创建另一个按钮，而不仅仅是第一个按钮

Answer 1

您需要使用.on()来使用事件委托。我建议您为按钮使用类名，以便绑定事件并仅委托给这些按钮，因为“按钮”选择器太通用了。

$(document).on('click', 'button', function(){
  $(this).after('<button>click</button>');
});

演示

html

<button class="addBtn">Add</button>

脚本

$(document).on('click', '.addBtn', function(){
  $(this).after('<button class="addBtn">click</button>');
});

当你只绑定一个点击事件时，它只会绑定到现有的 DOM 元素，所以你想将事件绑定到父元素（例如：- 我使用过文档，但你可以使用已经存在的容器，如 div或其他东西），稍后您使用与该容器相同的选择器添加的任何元素都将通过委托获得该事件。

来自 Jquery 文档

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

Answer 2

你需要使用.on()

$(document).on('click','button',function(){
   $(this).after('<button>click</button>');
});

因为.on允许我们将事件分配给稍后添加的 DOM。

Answer 3

尝试这个：

$(document).on('click',"button",function(){
  $(this).after('<button>click</button>');
});

阅读http://api.jquery.com/on

Answer 4

为所有按钮赋予相同的 CLASS。

如果您使用 jquery < 1.9 V 使用 .live()

如果您使用 jquery >= 1.9 V，请使用 .on()

$(CLASS).live('click', function() {

     // SOME ACTION

});