在.load()调用之后,jQuery通过ID访问元素

Question

$(document).ready(function() {
    $("img.tile").click(function() {
    var actid = $(this).data().id;
    $("#lz").load("/dialog/pre?actid=" + actid);
    $("#btnCheck").click(function() {
        alert("test");
    });
});

load()调用带来一个HTML片段,<input id="btnCheck" value="Check" /> 但是当我点击它时事件不会触发.必须与片段的加载方式有关.你是如何做到这一点的？

Answer 1

正确,您需要click在确定数据已加载或使用live事件附加事件后附加事件.live将附加一个处理程序,如果它现在或在将来的任何时候找到它并且可能最容易实现:

$("#btnCheck").live('click', function() {
    alert("test");
});

或者,您可以在确定数据已加载后附加它.正如@bzlm在他的评论中指出的那样load是一个异步事件,所以你不能认为它已经完成了任何后续代码.幸运的是,load允许您将函数作为第二个参数传递,该参数将在加载所有数据后触发:

$("#lz").load("/dialog/pre?actid=" + actid, function() {
    $("#btnCheck").click(function() {
        alert("test");
    });
});

Answer 2

最好的方法是使用delegate并利用事件冒泡来捕获可能尚不存在的元素上的事件.这非常简单,尤其是当您可以处理现有选择以提供上下文时:

$(document).ready(function () {
    $("img.tile").click(function () {
        var actid = $(this).data().id;
        $("#lz")
            .load("/dialog/pre?actid=" + actid)
            .delegate("#btnCheck", "click", function () {
                alert("test");
            });
    });
});

这在功能上与load示例等效,但在几个方面会有稍微好一点的性能.