How can I prevent bootstrap-table from clearing my event handlers?

Question

I am using Bootstrap Table to display nice tables in my web app. I found that when my regular plain HTML <table> is converted into a Bootstrap table, my buttons inside the table lose event handlers — especially, don't fire what I had registered for the onclick event.

For instance, if mainTable is the ID of a <table> and button of a <button>, nothing happens when the I click the button if the events are attached in this order:

$("#button").click(function() {
  alert("hi there");   
});

$("#mainTable").bootstrapTable();

Calling bootstrapTable() works, but I can't do that as I get the configured table from some other code I don't control.

Why are these event handers removed? Can I prevent this behaviour?

Here's a JFiddle to try it out.

Answer 1

It looks like Bootstrap Table's code, when it has to transform an existing table, gets the content of each cell as text (including potential internal HTML markup), and recreates them. The side effect is that all event handlers are lost in this process.

The only workaround is to attach the event handlers after the transformation of the table.