Proplem repeat row data when using boostrap modal to confirm

Description :

I created ‘data-formatter’ for column status, when click button status, i show a modal boostrap alert for user to select "cancel " or “ok”, in this modal. When user click “ok”, row will be updated and using ajax to update server. When users click the button ok in modal several times, I see the row data repeat ( in console mode ), i can’t update for this row, each time so that updates for all other row

demo: http://plnkr.co/edit/cfczOxSoBkKwT2BaG1Sw?p=preview ( turn on console mode on browser to see khi click status button)

html

<table id="table">
      <thead>
        <tr>
            <th data-field="name">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="status" data-formatter="statusFormatter" data-events="statusEvents">Status</th>
            <th data-field="description">Description</th>
        </tr>
      </thead>
    </table>

    <!-- Modal Alert -->
    <div class="modal fade modal-alert" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body"></div>
          <div class="modal-footer">
                  <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-sm btn-primary btn-ok">Ok</button>
          </div>
        </div>
      </div>
    </div>

js

// Code goes here

var data = [
    {
        "name": "bootstrap-table",
        "stargazers_count": "526",
        "forks_count": "122",
        "status":1,
        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
    },
    {
        "name": "multiple-select",
        "stargazers_count": "288",
        "forks_count": "150",
        "status":0,
        "description": "A jQuery plugin to select multiple elements with checkboxes :)"
    },
    {
        "name": "bootstrap-show-password",
        "stargazers_count": "32",
        "forks_count": "11",
        "status":1,
        "description": "Show/hide password plugin for twitter bootstrap."
    },
    {
        "name": "blog",
        "stargazers_count": "13",
        "forks_count": "4",
        "status":0,
        "description": "my blog"
    },
    {
        "name": "scutech-redmine",
        "stargazers_count": "6",
        "forks_count": "3",
        "status":1,
        "description": "Redmine notification tools for chrome extension."
    }
];

window.statusEvents = {
    'click .btn': function (e, value, row, index) {

        $('.modal-alert .modal-body').text($(e.currentTarget).attr('alert_title'))
        $('.modal-alert').modal('show')

        var state = row.status==1 ? 0 : 1

        $('.modal-alert .btn-ok').on('click', function(e){
            console.log(row) // row repeat and add before row
            $('.modal-alert').modal('hide')
            $.ajax({
                url: 'controller/status',
                type: "get",
                data: {id:row.id,status:state},
                success: function(data){
                    $table.bootstrapTable('updateRow',{
                        index: index,
                        row: {
                            status: state
                        }
                    })
                }
            });


        })

    }
}

function statusFormatter(value, row, index){

    var html = '';
    if(value==1){
        html =  '<a class="btn btn-default active" title="unBan" alert_title="Unactive ?"><span class="glyphicon glyphicon-check"></span></a>';
    }else{
        html =  '<a class="btn btn-default" title="Ban"  alert_title="active ?"><span class="glyphicon glyphicon-check"></span></a>';
    }
    return html;
}

$(function () {
    $('#table').bootstrapTable({
        data: data
    });
});

[wenzhixin]

You need to unregister the click event:

$('.modal-alert .btn-ok').off('click').on('click', ...

[wenzhixin]

Let’s close this issue.