Question

我有一个在.html文件中的DIV，它通过以下方式加载到我的文档中：

$(document).Ready( function() {
    $("#contentDiv").load("some.html")


    //some.html contains a button id=saveButton
    $("#saveButton").click( function () {
        alert("Here I am!");
    }

});

该活动不会开火。如果我删除some.html的内容并将其放入文档中，嗯，“物理上”，该事件将会触发。

所以，我很确定这个问题与html是通过.load（）注入的事实有关。

这很麻烦，因为如果你查看页面源代码，实际上所有的HTML都在那里，包括按钮。

所以，问题是，是否有任何方法可以使这项工作？我使用.load（）来降低页面复杂性并提高可读性，尽管代码折叠，我真的不想将所有这些HTML都放到文档中。

编辑：此代码只是在袖口上输入。它不是实际代码的过去，而只是为了证明问题所在。但是，谢谢你的指出。

EDIT2 ：Grrrrrrr。 }）;

Answer 1

load()是异步的，所以你需要回调中的工作：

$(document).ready(function() {
    $("#contentDiv").load("some.html", function(){
        //some.html contains a button id=saveButton
        $("#saveButton").click( function () {
            alert("Here I am!");
        });
    });
});

希望有所帮助：）

Answer 2

一种方法是在some.html中添加将在div出现时加载的脚本行。

您可以将此脚本添加到some.html（在脚本标记中）：

registerButton();

然后您可以在当前文档中定义registerButton（）。

其他方式，如果我没记错的话是使用类似函数bind（）

的东西

Answer 3

jquery load()函数是异步的。如果要将事件绑定到已加载的内容，则应将代码放入回调函数中：

$(document).ready(function() {
    $("#contentDiv").load("some.html", function() {
        //you should put here your event handler
    });

});

Answer 4

如果你想在DOM准备就绪的元素上触发事件，那么你需要使用.on事件。

http://api.jquery.com/on/

$("#saveButton").on("click", function() {
      alert("Here I am!");
});

Answer 5

您的问题是jquery load()函数是@lucas提到的异步。但他的代码有语法错误，试试这个：

    $(document).ready(function () {
        $("#contentDiv").load("some.html", function () {
            $("#saveButton").click(function () {
                alert("Here I am!");
            });
        });
    });

希望现在有所帮助

Answer 6

您需要在加载OR之后将事件处理程序绑定到来自加载

的HTML容器

$(document).ready(function() {
  $("#contentDiv").load("some.html", function() {
    $("#saveButton").on('click',function() {
      alert("Here I am! Bound in callback");
    });
  });
});

或者使用:(不需要在contentDiv存在的情况下准备好文件）

$("#contentDiv").on('click','#saveButton',function(){
     alert("Here I am! bound to container div");
});

编辑：加载SAVE按钮点击（每条评论）（虽然这没有意义）

$(document).ready(function() {
  $("#saveButton").on('click',function() {
    $("#contentDiv").load("some.html", function() {
      alert("Here I am! Bound in callback");
    });
  });
});

jQuery绑定事件没有触发通过$（）加载的元素.load（）

6 个答案: