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

【问题标题】：jQuery not getting element id from dynamically loaded filejQuery没有从动态加载的文件中获取元素ID
【发布时间】：2017-06-02 21:09:26
【问题描述】：

我有这段代码，它会获得一个点击的 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 函数将停止工作。

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

然后你去绑定一个点击事件处理程序到这些项目，jQuery 不会出错，它只是不会将点击事件处理程序绑定到任何东西。

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

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

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

注意：您也可以将Live 方法与所有其他事件处理程序（鼠标悬停、按键等）一起使用

【讨论】：

【解决方案2】：

使用live 函数。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

只是取消更新这个老问题...... 由于 live 自 jQuery 1.7 起已弃用，您最好将 on 与 delegate 事件一起使用。

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+

$( 文档 ).delegate( 选择器、事件、数据、处理程序); // jQuery 1.4.3+

$( 文档 ).on( 事件、选择器、数据、处理程序); // jQuery 1.7+

代替

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

使用这个

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

【讨论】：