jquery - 如何向 AJAX 附加的元素添加事件？

Question

我使用 AJAX 加载一些 html，这工作正常，加载的位之一是一个联系表单，我试图使用它拦截提交事件

$(document).ready(function() {    
    $('contact_form').submit(function() {
        return false;
    });    
});

上面的 JavaScript 是在初始页面加载时加载的。

但是，当我访问该页面并提交表单时，它会遵循其默认路径并遵循常规提交(可以工作，但这是我希望大多数用户不要遵循的非 JavaScript 兼容性路线)。我尝试过测试.click()最初加载的页面位和使用 AJAX 加载的类似位上的事件，结果是只有最初随页面加载的元素执行 .click()事件。

我猜测事实上我在将元素添加到 DOM 之前加载了 jQuery 代码(我有一些 <script> 标签随初始页面加载一起加载)，并且这没有正确注册监听器(疯狂的猜测，实际上我真的不知道)。

我的假设正确吗？最好的解决办法是什么？

Answer 1

首先contact_form不是有效的选择器，因为它正在寻找 <contact_form>元素。应该是#contact_form按 id 选择，或 .contact_form按类别选择。

其次，您对事件处理程序的假设是正确的，快捷方式事件处理程序( click 、 submit 等)仅适用于页面加载时 DOM 中可用的元素。

如果该元素在页面加载后附加到 DOM(例如通过 AJAX)，则需要使用 delegate()或on() (在 jQ1.7+ 中)向该元素添加事件:

$('body').delegate("#contact_form", "submit", function() {
    return false;
)};

或者:

$('body').on("submit", "#contact_form", function() {
    return false;
)};

我用过body作为此处的父选择器，但您应该使用与要放置事件的元素最接近的静态元素(即页面加载时 DOM 中可用的元素)。