Bootstrap table - cannot add click event on tr

Question

I'm using Bootstrap table (http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html)

I'm trying to add click event

$('tr').click(function(){ console.log('test'); });

but it doesn't work. I know that there is event in bootstrap-table library, but it's important for me to use it exactly with jQuery's .click. Do you know what is blocking this event in bootstrap-table source code? I tryied to remove all ".off"s from bootstrap-table.js, but it didn't help.

Can you create a fiddle to reproduce this issue? – Sterling Archer Oct 25 '14 at 22:25 — Sterling Archer, Oct 25 '14 at 22:25

wenyi · Answer 1 · 2017-01-17T04:26:25.580

30

I think you can use the onClickRow or click-row.bs.table event instead of the tr click event, here is the documentation and examples.

Code example:

// Fires when user click a row
$('#table').bootstrapTable({
    onClickRow: function (row, $element) {
        // row: the record corresponding to the clicked row, 
        // $element: the tr element.
    }
});

// or
$('#table').on('click-row.bs.table', function (e, row, $element) {
    // console.log(row, $element);
});

(I am the author of Bootstrap Table, hope to help you!)

edited Jan 17 '17 at 04:26

answered Oct 27 '14 at 01:55

wenyi

1,384
8
11

please see http://stackoverflow.com/questions/32266101/uncheck-table-row-in-bootstrap-table-on-specific-condition also – Vilas Aug 31 '15 at 09:25
$('.table.clickable').bootstrapTable({}); removes all contents in the table!! – Alaeddine Jan 28 '16 at 09:43

score 5 · Answer 2 · answered Oct 25 '14 at 22:29

5

Try this

 $('table').on('click', 'tr' , function (event) {
    console.log('test');

            });

answered Oct 25 '14 at 22:29

Jelle Keizer

723
5
9

not sure, what would this change compared to what the OP tried...? – benomatis Oct 25 '14 at 22:32

score 0 · Answer 3 · answered May 11 '16 at 12:20

i have try with this code, success for get value find td(td:eq(1)).

        $('#tbname').on('change', 'tr' , function (event) {
            if($('.selected')){
                kode =$('.selected').closest('tr').find('td:eq(1)').text();
                $("input").val(kode);
           }

score 0 · Answer 4 · answered Dec 04 '16 at 03:22

I just some days ago started using this helpful plugin, I was facing the same problem and the user wenyi gave a good answer but kinda complex for people that are starting.

/* You have this table */
<table id="my-table">
   <tr>
      <a href="#" class="my-link">Details</a>
   </tr>
</table>

/* You have to options to detect this click (and more) */

/* Normal way */
$(".my-link").click(function(){
   //do something
});

/* To solve this click detection problem you will need to use this */
$("#my-table").on('click','.my-link',function(){
   //do something
});

Why? because each time that one html element is added dynamically in the DOM they cannot be detected with the normal 'click function'.

Additonally:

/* Even you can use this method, but the performance is less */
    $(document).on('click','.my-link',function(){
   //do something
});

Bootstrap table - cannot add click event on tr

4 Answers4

Linked