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.php后，jquery函数仅对该external.html文件不起作用。其余的jquery函数仍然有效。

This is the demo link to the website

Answer 1

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

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

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

注意第二个参数。

Answer 2

jQuery的load（）函数由于多种原因不会复制事件绑定。它只处理目标元素到当前DOM的附加。你必须重新绑定它们，或者使用on（）。

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

2 个答案: