我有一个页面,其中 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/