javascript - 表单提交识别: works only when a textarea is active. 我做错了什么?

标签 javascript jquery ajax

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

但是,如果我单击页面上的其他位置并且文本区域变为非事件状态,则提交按钮将不再像应有的那样工作:它将表单提交给 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>

最佳答案

如果您的表单动态添加到页面,那么您需要一个不同的事件绑定(bind),将其自身附加到所有当前和 future 表单。您当前拥有的绑定(bind)称为直接绑定(bind),但您真正需要的是委托(delegate)绑定(bind)。 on() 的不同用法会给你:

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

关于javascript - 表单提交识别: works only when a textarea is active. 我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23680451/

相关文章:

javascript - 按属性查找多边形 Google map 引擎

javascript - 如何通过 JSON GET 请求将输入中的文本附加到单个元素?

javascript - 解析 JSON 返回神秘错误

python - 我应该如何在 Django 应用程序中实现反向 AJAX?

javascript - 错误 - 在主页上添加文本计数器后(使用 Jquery 计算剩余字符) - 需要刷新页面

javascript - AngularJs iOS App - 关于背景模糊的弹出屏幕的建议

javascript - 更改 jQuery 的默认序列化器

javascript - 使用 AjaxFileUpload 函数

jquery - 如何使用 jQuery 旋转图像?

jquery - 为什么回调出现在 jquery ajax 调用上?