javascript - 带有 ajax 请求的 Bootstrap 模式

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 对象时，它会将事件绑定(bind)到“#change-btn”对象。因此，每个绑定(bind)的单击事件都会向服务器发送另一个 ajax 请求。因此，您必须在绑定(bind)之前删除所有点击事件。你可以这样做；

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