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（）调用带来一个<input id="btnCheck" value="Check" />的HTML片段但是当我点击它时，事件不会触发。必须与片段的加载方式有关。你是如何做到这一点的？

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示例，但在几个方面会有稍微好一点的表现。

Answer 3

尝试：

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

这将获取load事件后添加到dom的所有元素。更好的方法可能是使用.delegate()

在.load（）调用之后，jQuery通过ID访问元素

3 个答案: