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()的静态调用不适用于您。这只会将事件处理程序绑定到与运行时运行时匹配的元素，因此在此之后添加的任何元素都不会绑定事件处理程序。

解决方案是事件委派，使用.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; });

Answer 2

对于动态生成的元素，您应该委派事件，您可以使用on方法，尝试以下操作：

$(document).ready(function() {
    $(document).on('click', 'input[type=submit]', function() {
        alert('test');
        return false;
    });
});

jQuery .submit（）没有触发

2 个答案: