jquery - jquery 代码在加载的外部 html 文件中不起作用

Question

我正在使用此代码将外部 html 文件加载到主index.php文件中。

$(document).ready(function(){
    $(".fld").click(function(){
        $("#collection").load($(this).attr("name"));
    });
});

代码从此 html 文件中获取数据，
<a class="fld" name="external.html" href="#">Folder 1</a>

这是 external.html 文件
<a class="song" href="#" name="http://impk.co.in/sound/sound1.mp3">Song1</a>

现在将该external.html文件加载到index.phpjquery 后，函数external.html仅适用于该文件。其余的 jquery 函数仍在工作。

这是网站的演示链接

Answer 1

这听起来像是一个事件委托问题。当您第一次使用.click等绑定到元素时，事件会立即绑定到现有元素。如果 DOM 中不存在元素，则事件不会绑定到它。如果稍后添加该元素（例如通过 Ajax），它不会自动绑定。

您可以通过绑定到存在的元素（甚至最多document）并指定应该匹配的选择器来进行委托，例如：

$("#collection").on('click', '.song', function () { ...

注意第二个论点。

Answer 2

jQuery 的 load() 函数不复制事件绑定有几个原因。它只处理将目标元素附加到当前 DOM。您必须重新绑定它们，或使用 on()。