Question

我知道这个问题已被问过几次，但似乎没有一个解决方案对我有用。我遇到了一个问题，即我在加载文档时添加到某些元素的点击事件会多次触发。真正奇怪的是它每次点击都会增加点火的次数，就像每次点击重新绑定事件一样。

这是我的代码：

$(document).ready( function() {
  BindUserControls('#log_in', '/users/sign_in')
  BindUserControls('#sign_up', '/users/sign_up')
})

var BindUserControls = function(button, path) {
  $(button).click( function() {
    $.ajax({
      method: 'GET',
      url: path
    })
    .done(function(data){
      $('.modal-content').empty()
      $('.modal-content').prepend(data)
      $('.modal').modal('show')
    })
  })
}

到目前为止，我尝试过的解决方案包括

在.on（）
在同一函数中取消绑定事件
通过文件正文委派活动

似乎没有任何效果。我也禁用了turbo-links，我不确定这是否有所作为。

非常感谢任何帮助！

感谢。

Answer 1

试试这个：

$(document).ready( function() {
  BindUserControls('#log_in', '/users/sign_in')
  BindUserControls('#sign_up', '/users/sign_up')
})

var BindUserControls = function(button, path) {
  $(button).click( function(e) {
    e.preventDefault();
    $.ajax({
      method: 'GET',
      url: path
    })
    .done(function(data){
      $('.modal-content').empty()
      $('.modal-content').prepend(data)
      $('.modal').modal('show')
    });
    return false;
  });
};

尝试将sleep(1);放在AJAX PHP文件的第一行，以防止多次调用。

另一种解决方案可能是：

$(document).ready( function() {
      BindUserControls('#log_in', '/users/sign_in')
      BindUserControls('#sign_up', '/users/sign_up')
    })

    var BindUserControls = function(button, path) {
      $(button).click( function(e) {
        e.preventDefault();
        clearInterval(interval);
        var interval = setInterval(function(){
                $.ajax({
                  method: 'GET',
                  url: path
                })
                .done(function(data){
                  $('.modal-content').empty()
                  $('.modal-content').prepend(data)
                  $('.modal').modal('show')
                });
                clearInterval(interval);
        }, 300);
        return false;
      });
    };

但我不测试这个。我使用类似的功能来做其他事情并且工作正常。

Answer 2

刚刚找到了解决方案。基本上，我为click事件所在的每个元素添加了一个类，然后在BindUserControls函数中的该类上调用了'.off（）'。我之前尝试过使用'.off（）'，但是以不同的方式 - 我做了一些'$（按钮）.off（...）。on（...）'，它没有'为我工作。感谢所有的答案！以下是我的代码：

var BindUserControls = function(button, path) {
  $(button).on('click', function() {
    $.ajax({
      method: 'GET',
      url: path
    })
    .done(function(data){
      $('.modal-content').empty()
      $('.modal-content').prepend(data)
      $('.modal').modal('show')
    })
    $('.user_controls').off()
  })
}

＆＃39;单击＆＃39;事件多次触发，没有解决方案正常工作

2 个答案: