从jQuery.load（）加载的页面访问html元素

我有一个带有div标记的页面，我使用jQuery.load（）将不同的视图加载到该页面中

根据帖子中的第二个答案：

事件处理程序仅绑定到当前选定的元素；他们 在代码进行调用时页面上必须存在

因此，我将

.click（）

代码移动到正在加载的页面（本例中为settings.html），我可以从settings.html访问元素。或者我也可以做类似的代码张贴建议

$("#settings").click(function(){
    $("#load").load("main/settings.html", function(){
        $("#test1").click(function(){
           alert('hello');
        });

    });
});

//or
$("#settings").click(function(){
    $("#load").load("main/settings.html");

    $(document).on("click","#test1",function(event){
           alert('hello');
    });
});

但我想知道如何绑定所有元素，假设我不知道提前绑定哪些元素。在上面的例子中，我知道我需要绑定

#test1

id。但是如果我有一个像

play.js

这样的文件，在加载的页面上更改不同的内容，上面列出的方法将要求我将我的代码与

play.js

分开，并将每个部分放在一个绑定到加载事件的函数中。我有很多

.load（）

事件，想把我的js像

.click（）

等保存在一个单独的文件中

如何绑定所有加载的元素而不提前指定它们？或者，我如何告诉jQuery执行以下操作：

$("#settings").click(function(){
    $("#load").load("main/settings.html", function(){

        // pseudo code
        (function(){
           bind all elements from main/settings.html to DOM
        });

    });
});

因此，下面列出的脚本可以访问这些元素

<script src="../js/play.js"></script>

---

在第一次加载的回调函数中绑定加载页面的内容

$("#settings").click(function(){
    $("#load").load("main/settings.html", function(){
        $("#test1").click(function(){
           alert('hello');
        });

    });
});

---

这里的其他答案都是很好的解决方案，但是我想解释一下发生这种情况的实际原因：

load

是一个异步函数，这意味着它不做一些工作并在完成时返回，而是安排要完成的工作，然后立即返回

在这种情况下，调用

load

意味着最终将获得

main/settings.html

的内容并将其放置在

#load

中，但不是在代码行运行后立即加载。因此，您无法选择尚未创建的元素

<script src="../js/play.js"></script>

---

为了管理这种编程风格，此类函数通常接受

回调

作为参数，这是另一个函数（由用户提供），操作完成后API将调用该函数。在本例中，它是加载的第二个参数。在这个函数中，您可以对操作的结果进行操作。

下面是我要做的：

在HTML页面中，加载一些

如下：

function loadSettings() {
  $('#test1').click(function() {
    alert('Hello, world!');
  });
  // other event handlers...
}

你想做多少就做多少

然后：

---

这将把

settings.html

页面加载到视图中，然后调用

loadSettings（）

，这将设置您的事件处理程序。

您检查过这个吗？是的，是在我原来的帖子里。我已经更新了我的帖子来尝试改进这个问题。我已经更新了我的帖子来尝试改进这个问题。谢谢。Jquery.load有一个可选的第二和第三个参数。三是回调函数：

function loadSettings() {
  $('#test1').click(function() {
    alert('Hello, world!');
  });
  // other event handlers...
}

$("#settings").click(function(){
    $("#load").load("main/settings.html", loadSettings);
});