使用 JavaScript 创建的按钮，当再次创建按钮时，单击事件会发生两次

Question

我有一个弹窗（模态），模态上的数据是用 JavaScript 生成的。发送ajax请求以获取显示的数据

当单击启用或禁用按钮时，将带有此信息的 ajax 发送到后端。

我遇到的问题是，当模式关闭然后重新打开时，单击操作发生了两次（如果您单击启用，它会发送消息弹出窗口打开和关闭的次数）。

这是一些创建模态的代码

$(document).on('click', '.availability', function() {
    $('.availability_modal_table_body').empty();
    var stuff = $(this).data('info').split(',');

    $.ajax({
            type: 'get',
            url: base_url+"catalogs/"+stuff[0]+"/options",
           
            success: function(data) {
                $('.availability_modal_title').text(`Options for ${stuff[1]}`);

                    var string ="";
                for (var i = 0; i < data.avalable.length; i++) {
               string+=`<tr class="option_${data.avalable[i].id}"><td>${data.avalable[i].name}</td><td>`;
  
                    if(data.avalable[i].catalog_id == null){
                        string+= `<button  data-toggle='tooltip' class='btn  btn-info' data-original-title='View'>Create Add</button> `;
                        string+= `<button value="ad_block"${stuff[0]}  class='btn ad_disable btn-warning' data-info="${data.avalable[i].id},${stuff[0]}">Block</button>`;
                    }else if(data.avalable[i].order_id == null){
                             string+= `<button value="create_ad"${stuff[0]}  data-toggle='tooltip' class='btn  btn-info view' data-original-title='View'>Create Add</button> `;
                             string+= `<button value="enable_Ad"${stuff[0]}  class='btn enable_ad btn-warning' data-info="${data.avalable[i].item_id}">Enable</button>`;

                    }else{
                         string+= `<button value="create_ad"${stuff[0]}  data-toggle='tooltip' class='btn  btn-success view' data-original-title='View'>View Booking</button>`;

                    }
                    string+="</td></tr>";
                }
                $('.availability_modal_table_body').html(string);                
                $('#availability_modal').modal('show');
                 
            }
        });

这是阻止按钮代码

$(document).on('click', '.ad_disable', function() {
       var stuff = $(this).data('info').split(',');
        $.ajax({
            type: 'get',
            url: base_url+`items/block/${stuff[0]}/${stuff[1]}`,
             headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
            success: function(data) {
                if(data == 1){
                      toastr.success('Item blocked');
                      $(this).hide();
                }else{
                    toastr.warning('Failed - See errors');
                }
            }
        });  
    });

Answer 1

发生这种情况是因为当您关闭模式时，您并没有解除注册到按钮的点击事件的绑定。

在关闭模态框之前，你应该先解除点击事件的绑定。

如果你使用 jQuery ≥ 1.7 那么你可以像下面这样取消绑定点击。

$(document).off('click', '.availability')

对于 jQuery

 $(document).unbind('click', '.availability')

更多参考请看这篇文章：https://api.jquery.com/unbind/