Javascript 带ajax请求的引导模式

我想更改系统中的用户状态。在更改状态之前，我需要显示确认框。所以我为它添加了引导模型，如下所示

html

迪努卡·佩雷拉
用户处于活动状态
蒂兰加佩雷拉酒店
用户处于非活动状态
测试佩雷拉
用户处于活动状态

js

$（文档）.on（'click'，'active'，函数（）{
var$this=$（this）；
$（“#状态模型”）.modal（）；
$（'.alert'）.remove（）；
$（'#更改btn'）。单击（函数（）{
var id=$this.parents（'tr'）。data（'id'）；
$.post（'users/status'，{id:id，status:0}，函数（数据）{
var obj=$.parseJSON（数据）；
if（obj.success！=未定义）{
$this.html（'Activate'）；
$this.removeClass（'active'）；
$this.addClass（'inactive'）；
$this.parents（'tr'）.find（'.status'）.html（'User is inactive'）；
$（“#搜索表单”）。在（'User activation successful'）之前；
$（“#状态模型”）.modal（'hide'）；
}       
}); 
});
});
$（文档）.on（'单击'，'非活动'，函数（）{
var$this=$（this）；
$（“#状态模型”）.modal（）；
$（'.alert'）.remove（）；
$（'#更改btn'）。单击（函数（）{
var id=$this.parents（'tr'）。data（'id'）；
$.post（'users/status'，{id:id，status:1}，函数（数据）{
var obj=$.parseJSON（数据）；
if（obj.success！=未定义）{
$this.html（'Deactivate'）；
$this.removeClass（'inactive'）；
$this.addClass（'active'）；
$this.parents（'tr'）.find（'.status'）.html（'User is active'）；
$（“#搜索表单”）。在（'User deactivation successful'）之前；
$（“#状态模型”）.modal（'hide'）；
}       
}); 
});
});

---

这是第一次工作。之后，它将发送多个ajax请求。在我添加此模型之前，它是成功的。问题是什么

当您单击.active或.inactive对象时，它会将一个事件绑定到“#change btn”对象。因此，每个绑定的click事件都会向服务器发送另一个ajax请求。因此，您必须在绑定之前删除所有单击事件。你可以这样做

$( "#change-btn").unbind( "click" );
$('#change-btn').click(function() {
...
});

$(document).on('click','.active', function () {

    var $this = $(this);

    $('#status-model').modal();

    $('.alert').remove();

    $('#change-btn').click(function() { 

        var id = $this.parents('tr').data('id');        

        $.post('users/status', {id:id, status:0},  function( data ) {
            var obj = $.parseJSON(data); 

            if (obj.success != undefined) {
                $this.html('Activate');
                $this.removeClass('active');
                $this.addClass('inactive');
                $this.parents('tr').find('.status').html('User is inactive');

                $('#search-form').before('<div class="alert alert-success">User activation successful</div>');
                $('#status-model').modal('hide');
            }       
        }); 
    });
});

$(document).on('click','.inactive', function () {
    var $this = $(this);

    $('#status-model').modal();

    $('.alert').remove();

    $('#change-btn').click(function() { 

        var id = $this.parents('tr').data('id');        

        $.post('users/status', {id:id, status:1},  function( data ) {
            var obj = $.parseJSON(data); 

            if (obj.success != undefined) {
                $this.html('Deactivate');
                $this.removeClass('inactive');
                $this.addClass('active');
                $this.parents('tr').find('.status').html('User is active');

                $('#search-form').before('<div class="alert alert-success">User deactivation successful</div>');
                $('#status-model').modal('hide');
            }       
        }); 
    });
});

$( "#change-btn").unbind( "click" );
$('#change-btn').click(function() {
...
});