Bug when using boostrap table to confirm update row data

nats86stan

I render a button ( ban button ) on every row data. when click this button , modal will display to user confirm yes or no, if click yes will update ban status for this row. ( Here I have used console mod to test row data return)

js

    $('#datatable tbody').on('click','.btn-ban',function(){

        var row     =  $(this).closest('tr')
        var data    =  table.row(row).data();
        
        $('#modalAlert .modal-body').text($(this).attr('alert_title'))
        $('#modalAlert').modal('show')
        $('#modalAlert .btn-ok').on('click', function(e){

            console.log(data) // data return to test.
            
            // Update Database
            // var state   = data.ban==1 ? 0 : 1
            // data.ban    = state
            //$.ajax({
            //    url: data.controller+'/'+'ban',
            //    type: "get",
            //    data: {id:data.id,state:state},
            //    success: function(d){
            //        dt.ban   = status
            //        table.row(row).data(data).draw();
            //    }
            //});

            $('#modalAlert').modal('hide')
        })
    })

However, when i click the first button , console mode will show this row data
Click the second button , console mode will show 2 row data ( of 1 and 2 row )
Third button .................. show 3 row data.
Fourth button ................ show 4 row data.
=> i just want get data of row I click, to update ajax.

Please Help me.
My demo link : http://plnkr.co/edit/IbJQVFytCWw1TVnTBpXg?p=preview
( turn one on browser to test )

pkwdadmin

Your #modalAlert is never destroyed. It is only hidden. You bind a click event to #modalAlert .btn-ok every time a ban button is clicked, so .btn-ok ends up with many click events bound.

There are a few ways to fix this, a simple way is to move the .btn-ok click handler outside your .btn-ban click handler.

nats86stan

Thanks very much. @pkwadmin.
Now i set a 'data' global var and move the .btn-ok click handler outside , and problem fixed