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

I'm trying to bind functions to newly added elements using jquery...I have tried numerous examples online, but somehow nothing works for me. I created a form with id and a button, on submit ajax loads elements from another page and inserts the html on current website. Everything seems to work fine, but the newly loaded elements don't have any events binded on. Here is the html:

我正在尝试使用jquery将函数绑定到新添加的元素中……我在网上尝试过无数的例子，但不知何故，没有什么适合我。我创建了一个带有id和按钮的表单，从另一个页面提交ajax加载元素，并在当前网站上插入html。一切似乎都运行得很好，但是新加载的元素没有绑定任何事件。html:

<form id="tclick" method="post" action="${tg.url('/entryCmd')}">
    <input type="hidden" name="id" value="${entries[0].id}"  />
    <input type="submit" value="submit"/>
</form>

and jQuery:

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

The edit-content div gets loaded right after the form element. It has some a elements, that sould be bound to jQuery functions.

编辑内容div在表单元素之后被加载。它有一些元素，可以绑定到jQuery函数。

2 个解决方案

#1

Got basically two options to do this:

基本上有两个选择:

Bind your events after appending the new html:

在添加新的html后绑定事件:

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

Use event delegation (with .on() or .delegate()).

使用事件委托(使用.on()或.delegate())。
```
$('.some-container').on('click', '.edit-button', function(e) {...});
```
This will delegate the click event to an element .some-container for any children with class .edit-button, not matter the latter was already in the dom or loaded afterwards.

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

#2

To add events to elements which are added to the DOM after page load you need to use either delegate(), or if you're using jQuery 1.7+ on().

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

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

API:
Delegate
On

API:委托

#1