Question

我有一个页面，其中Ajax每隔一段时间更新一次Feed。在每个帖子下面都有一个文本区域来回复。当textarea处于活动状态时，JQuery / Ajax可以毫无问题地将回复发布到数据库。我按下提交按钮，一切顺利。

但是，如果我单击页面上的其他位置并且textarea变为非活动状态，则提交按钮不再像以前那样工作：它将表单提交给root并且不运行Ajax功能。

你能弄清楚我的代码中有什么问题吗？谢谢你的帮助！

页面上的消息数量与表单数量相同。表格如下：

<form class="reply-form">
<textarea id="reply-11123" name="comment" class="plain-editor"></textarea>
<input type="submit" class="submit" value="Reply" />
<input type="hidden" value="URL HERE" name="url" /> 
</form>

Ajax代码（<head>）如下所示：

<script type="text/javascript">
$(document).ready(function() 
{
    $('.reply-form').on('submit', function (event) {
    event.preventDefault();
    var $form = $(this),
    message_data = $form.find('textarea[name="comment"]').val(),
    url = $form.find('input[name="url"]').val();

    var postData = {};
    var prefix = 'data';
    postData[prefix + '[message]'] = message_data;
    var posting = $.post(url, postData);

    });
}
</script>

Answer 1

如果您的表单被动态添加到页面中，那么您需要一个不同的事件绑定，它将自身附加到所有当前和将来的表单。您当前的绑定称为直接绑定，但您真正需要的是委托绑定。 on()的不同用法将为您提供：

$(document).on('submit', 'form.reply-form', function (event) {
     ... 
});

表单提交识别：仅在textarea处于活动状态时有效。我做错了什么？

1 个答案: