CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-table
Marius Cucuruz
Marius Cucuruz

Reputation: 165

action attached to selector in bootstrap table will not fire on page change

This is an issue I have with Wenzhixin's Bootstrap table.

If I have a selector (ie a link) with an action attached (eg on('click', fucntion() {...}); ) in any of the cells, that action won't fire when page is changed, sorting is applied search is performed.

Here's a short example: https://jsfiddle.net/L4h0gs4g/

HTML:

<table class="table table-striped table-bordered table-hover table-condensed table-responsive"
data-show-toggle="true"
data-show-columns="true"
data-toggle="table"
data-sort-name="device"
data-sort-order="desc"
data-striped="true"
data-pagination="true"
data-search="true">
    <thead>
        <tr>
            <th data-sortable="true" data-field="device">Device</th>
            <th data-sortable="true" data-field="assettag">Asset Tag</th>
            <th data-sortable="true" data-field="serial">Serial No.</th>
            <th data-sortable="false">Service<br />History</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>RICOH SPC242SF PRINTER</td>
            <td>C013991</td>
            <td>T222PB01287</td>
            <td class="fleet_machine_actions">
            <a href="javascript:void(0);" class="machine_actions" title="Service History">check</a>
            </td>
        </tr>

        <tr>
            <td>RICOH SPC242SF PRINTER</td>
            <td>C013991</td>
            <td>T222PB01287</td>
            <td class="fleet_machine_actions">
            <a href="javascript:void(0);" class="machine_actions" title="Service History">check</a>
            </td>
        </tr>
</tbody>
</table>

jQuery:

<script>
$(document).ready(function() {
    $(".machine_actions").on('click', function(e){
        alert($(this).attr("title"));
    });
})
</script>

The link will trigger the alert box at first, but if you sort the table it will not trigger again. It's like jQuery cannot see that selector once the table's been changed / updated.

Is this a known bug or is there a workaround this at all?

Also posted on https://github.com/wenzhixin/bootstrap-table/issues/2488

Upvotes: 0

Views: 1153

Answers (1)

wenyi
wenyi

Reputation: 1384

You can use:

$(document).on('click', '.machine_actions', function(e){
    alert($(this).attr("title"));
});

https://jsfiddle.net/L4h0gs4g/1/

BTW, you can use column option: events to do what you want: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

https://jsfiddle.net/L4h0gs4g/2/

Upvotes: 3

Related Questions