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>');
});

Demo

HTML

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

脚本

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

当你只绑定一个click事件时，它只会绑定到现有的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＆lt; 1.9 V使用.live（）

如果您使用的是jquery＆gt; = 1.9 V，请使用.on（）

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

     // SOME ACTION

});

jQuery：创建的按钮具有类似第一个按钮的效果

4 个答案:

Demo

HTML

脚本