外部加载的 HTML 文件上的按钮将不起作用
我正在使用 AJAX 加载 html 文件。每个 html 文件都有一个投票赞成和投票反对按钮。
运行这两个按钮的脚本位于 main(index) html 文件中的 document.ready 函数中。
当我直接将 html 插入主文件时，document.ready 函数起作用。 但是当我ajax加载html文件时，document.ready函数的内容将不会运行。
我做错了什么？
I am using AJAX to load html files. Each html file has a vote up and vote down button.
The script that runs these two buttons are in a document.ready function in the main(index) html file.
When I directly insert the html into the main file, the document.ready function works.
But when I ajax load the html files, the contents of the document.ready function will not run.
What am I doing wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用 ajax 加载的元素不会绑定到 document.ready 中定义的事件，因为它们在文档准备就绪时不存在。
您需要使用live或on。
例如：
或者如果您使用的是 jquery >1.7：
Your elements that gets loaded with ajax don't get binded to the events that where defined in document.ready because they did not exist when the document was ready.
You will need to use either live or on.
for example:
or if you are using jquery >1.7:
由于将事件处理程序绑定到按钮的脚本是在按钮存在之前运行的，因此新添加的按钮不会有任何事件处理程序。
您可以做的是将事件处理程序附加到按钮的父元素，然后使用事件对象的 target 属性来确定是否单击了按钮。这将确保动态生成的按钮也能正常工作。
如果您使用 jQuery，则可以使用它的 on() 方法。
Because your script that binds event handlers to your buttons is run before the buttons exist, newly added buttons won't have any event handlers.
What you can do is attach the event handler to a parent element of the buttons and then use the event object's target property to figure out if a button was clicked. That will ensure dynamically generated buttons also work.
If you're using jQuery you can use its on() method.
当您使用 Ajax 加载它们时，该函数已经已经运行。没有发生任何事情可以让它再次运行。
使用事件委托，而不是将事件处理程序直接绑定到元素。
When you load them with Ajax the function has already run. There is nothing happening that would make it run again.
Use event delegation instead of binding the event handlers directly to the elements.