Question

我正在尝试使用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>

和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

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

在追加新的HTML后绑定您的事件：

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

使用事件委托（使用.on()或.delegate()）。
```
$('.some-container').on('click', '.edit-button', function(e) {...});
```
这会将click事件委托给任何具有类.edit-button的子元素的.some-container，而不是后者已经在dom中或之后加载。

Answer 2

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

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

API：
Delegate
On

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

2 个答案: