jQuery .submit() 不触发

Question

我进行了大量搜索，但无法找出为什么我的 jQuery .submit() 不会触发。我还尝试使用 .click() 作为提交按钮。

我目前有一个 div 模板(包括一个表单):

<div class="reply-to-existing-message" style="display: none">
        <form class="reply-message-form">
            <textarea id="post-reply-message-textarea" name="PostReplyMessage[message]" rows="3" cols="40" style="resize: none"></textarea>
            <input class="reply-to-message-id" type="hidden" name="PostReplyMessage[id]" />
            <input class="post-reply-message-submit" type="submit" value="Reply"/>
        </form>
    </div>

单击回复按钮时，我使用 jQuery 将其附加到消息中(生成下拉回复表单，以便用户回复消息)。这工作正常(也使用 Firebug 仔细检查)。

但是，当我单击提交按钮时，我的 jQuery 代码没有生成警报，因此它甚至没有触发。谁能解释一下为什么会这样，谢谢! jQuery 代码:

$(document).ready(function() {
    $('.reply-message-form').submit(function() {
        alert('test');
        return false;
    }) ;
});

Answer 1

如果您要动态添加内容，那么对 .submit() 的静态调用将不会为您工作。这只会将事件处理程序绑定(bind)到与选择器匹配的元素在它运行时，因此之后添加的任何元素都不会绑定(bind)事件处理程序。

解决方案是事件委托(delegate)，使用.on()功能:

$(document).on('submit', '.reply-message-form', function(e) {
    alert('test');
    return false;
});

理想情况下，与其使用 document，不如选择最接近的包含所有动态内容的静态(即在页面加载时存在)元素。

或者，如果您使用的是 1.7 之前的 jQuery 版本，因此无法访问 .on() 函数，您可以使用 .delegate()代替函数:

$(document).delegate('.reply-message-form', 'submit', function(e) {
    alert('test');
    return false;
});