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

Question

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

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

当我直接将html插入主文件时，document.ready函数有效。 但是当我ajax加载html文件时，document.ready函数的内容将不会运行。

我在做什么错？

Answer 1

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

您需要使用live或on。

例如：

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

，或者如果你正在使用jQuery> 1.7：

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

Answer 2

因为你的脚本，结合事件处理程序到您的按钮运行存在的按钮之前，新添加的按钮不会有任何事件处理程序。

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

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

Answer 3

当你用Ajax加载它们时，函数有已经运行。没有任何事情会让它再次运行。使用event delegation而不是将事件处理程序直接绑定到元素。