访问HTML元素加载与jQuery .load（）

我有一个div标记的网页，我不同视图加载到使用jQuery .load（）访问HTML元素加载与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分开，并将每个代码放入与加载事件相关的函数中。我有很多事件，并希望我的js像.click()等在一个单独的文件。

我该如何绑定全部加载时未提前指定它们的元素？或者，我该怎么办告诉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>

来源

2016-08-13 jtlindsey

你检查过了吗？ http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Dario

是的，这是在我原来的职位。我更新了我的帖子，尝试改进问题。 – jtlindsey

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

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

    }); 
});

来源

2016-08-13 20:48:30 charsi

我更新了我的帖子，尝试改进问题。 – jtlindsey

这里其他的答案是好的解决办法，但我想解释实际原因这是发生：load是异步功能，也就是说，而不是做一些工作，返回时，它是完成后，它会安排待完成的工作，然后立即返回。

在这种情况下，主叫load意味着最终的main/settings.html内容将被通过的代码行，它已经运行之后立即时获得并放置在#load，但不是。因此，您无法选择尚未创建的元素。

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

来源

2016-08-13 23:59:16 rvighne

谢谢。 Jquery.load有一个可选的第二和第三参数。 3rd是回调函数：http：//api.jquery.com/load/ –

这里是我会做：

在你的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()，这将设置你的事件处理程序。

来源

2016-08-14 00:08:32

访问HTML元素加载与jQuery .load（）

回答

相关问题