Bootstrap modal with ajax request

Question

I want to change user status in my system. Before change the status i need show confirmation box. So i add bootstrap model for it like follows.

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

It is working for fist time. After that it will send multiple ajax request. It was successful before i add this model. What is the issue?

Answer 1

When you click .active or .inactive object it bind an event to "#change-btn" object. Therefore each of binded click event send another ajax request to server. Therefore you have to remove all click event before binding. You can do that like;

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