忽略先前的ajax请求

Question

代码已更新

这是我的js

destroy.js.erb

$('.delete_loop').on('ajax:success', function () {
  $(this).closest('tr').fadeOut();
  var loopNumber = $('.form-loop-number').html()
  $('.form-loop-number').html(loopNumber - 1)
  });

我的ajax被称为rails：remote => true helper

index.html.erb：

= link_to calendar_video_ad_schedule_path(schedule.id), method: :delete, :remote => true, data: { confirm: 'Êtes vous sûr ?' }, :class => 'delete_loop' do
    i.icon-trash style='color:grey; font-size: 1.2em'

删除项目时，我希望html中的.form-loop-number数量减少。 它第一次起作用，但是如果我两次或更多次调用该方法，则数量减少一次以上。

第一次删除项目：loopNumber-1

第二次我删除项目：loopNumber-2

第三次我删除项目：loopNumber-3

等等...

我的控制器响应sur js格式

控制器：

def destroy
  @schedule = Schedule::VideoAd.find(params[:id])
  @schedule.destroy

  respond_to do |format|
    format.html
    format.js
    end
end

我只希望每次减少1。 我怎样才能做到这一点 ？

Answer 1

你的

$('.delete_loop').on('ajax:success', function () {
...
});

事件分配在“删除”操作期间调用的代码内。 每次删除时，都会添加一个新的'ajax：success'事件处理程序。 所有这些事件处理程序都在后续的“删除”上执行。 将上述事件分配移到内部

$(document).ready(function() {
...
});

Answer 2

与其使用全局ajax：success事件处理程序，不如对您的特定ajax调用使用成功处理程序。 我看不到其余的代码，但是如果还有其他的Ajax，可能会击中该处理程序。

function deleteMyStuff(){
    $.ajax({
        url: '/delete-my-stuff/',
        success: function(response) {
            $('.delete_loop').closest('tr').fadeOut();
            var loopNumber = $('.form-loop-number').html();
            $('.form-loop-number').html(loopNumber - 1);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
}

另外，从文档中： http : //api.jquery.com/ajaxSuccess/

从jQuery 1.8开始，.ajaxSuccess（）方法仅应附加到文档。

因此，将其附加到.delete_loop元素可能会导致不良行为。