JQuery .on AJAX 事件多次触发

Question

我目前正在开发一个 Rails 应用程序，该应用程序会在单击表单时触发 AJAX 请求。该请求仅成功发送一次，但以下 JQuery 事件被触发了看似任意次数（从 1 到 15 次）。基本上，有一个 AJAX 请求，记录了许多 AJAX 事件。这导致返回的评论被多次插入。

$(document).ready(function() {
    jQuery(function () {
        //target comment-form from comment form partial
        $(document)
            .on("ajax:beforeSend", '.comment-form-div', function (evt, xhr, settings) {
                console.log("Ajax request sent")
                return $(this).find('text_area')
                    .addClass('uneditable-input')
                    .attr('disabled', 'disabled');
            })
            .on("ajax:success", '.comment-form-div', function (evt, data, status, xhr) {
                console.log("Ajax request successful")

                $(this).find('text_area')
                    .removeClass('uneditable-input')
                    .removeAttr('disabled', 'disabled')
                    .val('');
                $(this).hide('slow')
                return $(xhr.responseText).hide().insertAfter($(this)).show('slow');
            });
    });
});

作为参考，这里是 html 中的 Rails 表单：

<div class="comment-form-div" id='master-comment-form'>
    <%= form_for(comment, remote: true) do |f| %>
      <div class="field">
        <%= f.text_area :body, :placeholder => "Add a comment" %>
        <%= f.hidden_field :commentable_id, value: comment.commentable_id %>
        <%= f.hidden_field :commentable_type, value: comment.commentable_type %>
      </div>
      <div class="actions">
        <%= f.submit %>
      </div>
    <% end %>
</div>

Answer 1

你不应该劫持 ajax:beforeSend 也不是 ajax:success，只需将你的业务逻辑 (javascript) 放入 update.js.erb

如果你想检查它何时被触发，你可以编写一些“console.log('ajax:success failed!')”。