用ajax请求引导模态

Question

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

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"对象。因此，每个绑定的点击事件发送另一个ajax请求到服务器。因此，你必须在绑定之前删除所有的click事件。你可以这样做;

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