外部加载的HTML文件上的按钮不起作用

Question

我正在使用AJAX加载html文件。每个html文件都有一个投票和投票按钮。

运行这两个按钮的脚本位于主（索引）html文件的document.ready函数中。

当我直接将html插入主文件时，document.ready功能正常工作。 但是当我ajax加载html文件时，document.ready函数的内容将无法运行。

我做错了什么？

Answer 1

使用ajax加载的元素不会绑定到document.ready中定义的事件，因为文档准备好后它们不存在。

您需要使用实时或 。

例如：

$('#buttonLoadedUsingAjax').live('click', function() {});

或者如果您使用的是jquery＆gt; 1.7：

$(document).on("click", "#buttonLoadedUsingAjax", function(){ }); 

Answer 2

因为将事件处理程序绑定到按钮的脚本在按钮存在之前运行，所以新添加的按钮将没有任何事件处理程序。

您可以做的是将事件处理程序附加到按钮的父元素，然后使用事件对象的target属性来确定是否单击了按钮。这将确保动态生成的按钮也能正常工作。

如果你正在使用jQuery，你可以使用它的on（）方法。

Answer 3

当您使用Ajax加载它们时，该函数已经运行。没有任何事情可以使它再次运行。

使用event delegation而不是将事件处理程序直接绑定到元素。