将事件绑定到动态添加的元素

我正在尝试使用jquery将函数绑定到新添加的元素…我在网上尝试了很多例子，但不知怎的，对我来说没什么用。 我创建了一个带有id和按钮的表单，在提交ajax加载来自另一个页面的元素并在当前网站上插入html。 一切似乎工作正常，但新加载的元素没有绑定任何事件。 这是html：

和jQuery：

 $("#tclick").on("submit", function(data){ var h = $(this).serialize(); var d; $.get($(this).attr("action"), h, function(returnData) { d = returnData; } ); $(this).ajaxStop(function(){ $(this).after($(d).find(".edit-content").html()); }); return false; }); 

edit-content div在表单元素后面加载。 它有一些元素，可以绑定到jQuery函数。

Answer 1

基本上有两个选项可以做到这一点：

1. 在附加新的html后绑定您的事件：

    $(this).ajaxStop(function(){ $(this).after($(d).find(".edit-content").html()); // do you binding here }); 

2. 使用事件委托（使用.on（）或.delegate（） ）。

    $('.some-container').on('click', '.edit-button', function(e) {...}); 

   这会将click事件委托给具有类.edit-button的任何子元素的.some-container元素，而不管后者是否已经在dom中或之后加载。

Answer 2

要向页面加载后添加到DOM的元素添加事件，您需要使用delegate() ，或者如果您on()使用jQuery 1.7+。

 $(".edit-content").delegate("#myDiv", "click", function() { // do stuff when #myDiv gets clicked. }); 

API：
代表
上