Question

我有一个带有div标签的页面，我使用jQuery .load（）

加载不同的视图

<div class="main-content">
  <div id="load"></div>
</div>

当我加载如下所示的不同视图时，我无法访问settings.html

中的任何元素

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

    //not working
    $("#test1").click(function(){
       alert('hello');
    });
});

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

事件处理程序仅绑定到当前选定的元素;他们在您的代码拨打电话时页面上必须存在...

所以我将.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()个事件，并希望将.click()等js保存在单独的文件中。

如何在未提前指定的情况下绑定所有元素？或者我如何告诉jQuery执行以下操作：

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

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

    });
});

因此，像这样列出的脚本可以访问thoese元素。

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

Answer 1

这里的其他答案都是很好的解决方案，但是我想解释实际发生的原因：load是一个异步函数，这意味着

，而不是做一些工作并在完成后返回，它会安排要完成的工作，然后立即返回。

在这种情况下，调用load表示最终 main/settings.html的内容将被获取并放入#load，但不是在行的时候代码运行后立即执行。因此，您无法选择尚未创建的元素。

为了管理这种编程风格，这些函数通常接受callback作为参数，这是另一个函数（由您，用户提供），稍后在操作完成时由API调用。在这种情况下，它是load的第二个参数。在此功能中，您可以根据操作的结果采取行动。

Answer 2

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

{{1}}

Answer 3

这就是我要做的事情：

在您的HTML页面中，加载一些<script>，如下所示：

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

您可以根据需要制作尽可能多的这些。

然后：

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

这会将settings.html页面加载到视图中，然后调用loadSettings()，这将设置您的事件处理程序。

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

3 个答案: