3

我做了很多搜索,但找不到我的 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 将其附加到消息中(生成下拉回复表单,以便用户可以回复消息)。这工作正常(也使用萤火虫仔细检查)。

但是,当我单击提交按钮时,我的 jQuery 代码不会产生警报,因此它甚至没有触发。有人可以解释为什么会发生这种情况,谢谢!jQuery代码:

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

2 回答 2

10

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

解决方案是事件委托,使用以下.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;
});
于 2012-08-16T12:22:56.920 回答
3

对于动态生成的元素,你应该委托事件,你可以使用on方法,尝试以下:

$(document).ready(function() {
    $(document).on('click', 'input[type=submit]', function() {
        alert('test');
        return false;
    });
});
于 2012-08-16T12:22:26.877 回答