CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-table
Leandro Radusky
Leandro Radusky

Reputation: 1

JQuery code is not executed when bootstrap-table column list displayed changes

I have a bootstrap-table which have a not visible column at start: data-visible="false". The columns caption contains a button to display a modal help dialog:

<script>

    // This is repeated for each column that have help button, 
    // some are visible at the start and some not.
    $("#helpButtonColumnX").click(function(event) {
        event.stopPropagation(); // Prevent ordering by the field 
                                 // when the button is pressed.
        console.log("Hey"); // Do something
        $('#modalDialogColumnX').modal('show');
    });
</script>

The problem is that when the user changes which columns want to see this functionality is loss. (The console.log is for debugging, and is confirmed that the function is not called). Each column has his own button and modal, i put an X as an example. Thanks in advance.

EDIT:here a codeply

Upvotes: 0

Views: 441

Answers (2)

Jeff Bluemel
Jeff Bluemel

Reputation: 486

I wonder if this solution would work for you? I had a similar problem with clicking on select2 boxes in a column header. The bootstrap-table author provided a solution that I posted here.

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

I don't know enough about boostrap-table, it's possible that boostrap-table is adding/removing html and that will cause any events on the table to stop working (as the html is added after the event has been wired).

A quick look at the docs shows there's an onColumnSwitch event.

This gives you two options:

1 Re-add your click handler by adding an event handle for the onColumnSwitch event, eg something like:

$("#table").on("column-switch.bs.table", function() {
     // this would be easier if you put it in a separate function 
     // then you could call it from here and startup
     $("#helpButtonColumnX").click(function(event) {
     ...
     });
});

2 Use event delegation rather than wire up events directly, eg:

$("document").on("click", "#helpButtonColumnX", function() {
    ...
});

The second option might be your best bet, but has (some minor) performance issues (that you probably won't notice).

Upvotes: 1

Related Questions