CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-table
Leandro Radusky
Leandro Radusky

Reputation: 1

JQuery code is not executed when bootstrap-table columns selected to be shown 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.

Here is a codeply

Upvotes: 0

Views: 63

Answers (2)

Dario Picco
Dario Picco

Reputation: 177

Probably not the best code but sure the best (and worked) hotfix.

Put your onclick event in a function for example helpPrice_click()

function helpPrice_click() {
    //$("document").on("click", "#help   s", function() {
      event.stopPropagation();
      console.log("Hey");
      $('#modalPrice').modal('show');
    }

And call it directly on onclick of your button

<button class="btn btn-xs" data-toggle="modal" data-target="#modalPrice" id="helpPrice" onclick="helpPrice_click()">

Upvotes: 0

cesarluis
cesarluis

Reputation: 907

I think your problem is that the element does not exists in the page when you bind the click handler to the button.

See this answer

Upvotes: 1

Related Questions