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

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

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

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

API：
委托
开启