javascript - 加载层内的 Jquery 脚本不起作用

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 内的图层加载页面时，警报测试不起作用。有人可以为此提出解决方案吗？如果需要的话我可以为此准备一把 fiddle

Answer 1

这已经有 an answer ，但本质上您要寻找的是 event delegation

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

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

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

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

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