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

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等)