Question

当我们点击第62层时，我在jquery中有以下代码片段，该层从页面test.html加载图层“loaded-page”，如下所示。

<script>
$(document).ready(function(){
$('#62').on('click', function(e) {

$("#62" ).load( "test.html #loaded-page" );

});

$('#loaded-page').on('click', function(e) {
alert('test');

 });
 }); 

 </script>

 <div id="62">Layer62</div>

测试页面编码

 <div id="loaded-page">Loaded page</div>

我的问题是当我们点击DOM内的图层加载页面时，警报测试无效。有人可以为此提出解决方案吗？如果需要，我可以为此准备一个小提琴

Answer 1

这已经有an answer，但基本上你要找的是event delegation

当您在代码中绑定事件时，该元素尚不存在。

因此，您以不同方式绑定事件，以便它将响应动态添加的内容：

$(document).on('click', '#loaded-page', function(e) {
    alert('test');
});

注意：如果不知道您的html结构，我无法提供最佳解决方案，但我可以告诉您，如果可能，您不想要使用document。相反，您应该使用最初加载DOM时存在的最近父级。在你的情况下，我的猜测是这可行的：

$('#62').on('click', '#loaded-page', function(e) {
    alert('test');
});

Answer 2

因为当你绑定

时

$('#loaded-page').on('click', function(e) {
    alert('test');
});

可能是#loaded-page元素未加载到文档中，因此无法找到它更好的方法是：

$(document).delegate('#loaded-page','click',function(){
  alert('ok')

}）

加载图层内的Jquery脚本无法正常工作

2 个答案: