使用 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 < 1.7

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

有关更多参考，请参阅这篇文章：https://api.jquery.com/unbind/

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

Button created with JavaScript, when the button is created again the on click event happens twice

ajax

datatable

jquery

modal-dialog