如何将事件添加到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 +中）向该元素添加事件：< / p>

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

或者：

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

我在这里使用body作为父选择器，但是你应该使用最接近的静态元素（在页面加载的DOM中可用的元素）到你放置事件的那个元素。 / p>