Bootstrap Modal与Ajax请求

Question

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

HTML

<tbody>
    <tr>
        <td>Dinuka Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="inactive">Activate</a></td>
    </tr>
    <tr>
        <td>Thilanga Perera</td>
        <td>User is inactive</td>
        <td><a href="javascript:void(0)" class="active">Dectivate</a></td>
    </tr>
    <tr>
        <td>Test Perera</td>
        <td>User is active</td>
        <td><a href="javascript:void(0)" class="inactive">Activate</a></td>
    </tr>
</tbody>

JS

$(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');
            }       
        }); 
    });
});

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

Answer 1

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

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