Question

我有这个代码，它获得了一个点击的div id：

$(document).ready(function(){
    $(".playitem").click(function(){
        pos = this.id;
        alert(pos);
    });
});

这是html代码：

<div class="playitem" id="item-123456">
code here...
</div>

这是文档动态加载的方式：

$("#videoplaylist .left").load("extern1.htm");

当这个html代码在当前的html文件中时，一切正常。但是，如果我动态加载具有相同html代码的外部html文档和相同的div，则此jQuery函数将停止工作。

有什么建议吗？提前谢谢！

Answer 1

这是因为当您将click事件处理程序绑定到它们时，新文件的DOM元素尚不可用。如果jQuery选择器中没有元素......

$(".playitem").length === 0

然后你将click事件处理程序绑定到那些项目，jQuery不会出错，它只是不会将click事件处理程序绑定到任何东西。

尝试使用Live方法，这会将click事件处理程序绑定到与选择器匹配的所有当前和未来DOM元素。

$(document).ready(function(){
    $(".playitem").live('click', function(){
        pos = this.id;
        alert(pos);
    });
});

或者，您可以加载新的DOM元素，然后在加载这些DOM元素后重新绑定click方法。

注意：您可以将Live方法与所有其他事件处理程序一起使用（mouseover，keypress等）

Answer 2

使用live功能。

$(document).ready(function(){
    $(".playitem").live("click", function(){
        pos = this.id;
        alert(pos);
    });
});

Answer 3

尝试使用FireBug或IEDeveloperToolbar分析浏览器在加载后实际使用的HTML？可能结果与您预期的结果不同。

此外，您需要检查事件的顺序。如果在document.ready函数之后发生了加载，则您的click事件将不会附加，因为该元素尚不存在。

Answer 4

如果你要将它放在该文件中，你需要为onload绑定jquery函数。

它目前正在尝试在它存在之前实现它，所以你必须在创建它时调用它。

Answer 5

正如Sneakyness所说，将代码放在文件中会更好，因为实时方法会使浏览器变慢。

Answer 6

只是不更新这个老问题...... 由于自jQuery 1.7以来已弃用live，因此最好将on用于delegate个事件。

$（selector）.live（events，data，handler）; // jQuery 1.3 +

$（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3 +

$（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7 +

而不是

$(".playitem").live('click', function(){
    pos = this.id;
    alert(pos);
});

使用此

$("body").on('click', '.playitem', function(){
    pos = this.id;
    alert(pos);
});

jQuery没有从动态加载的文件中获取元素id

6 个答案: