Bootstrap dynamic table not working

Question

I want to use a Bootstrap dynamic table in my code. Here is the code for HTML:

<button type="button" id="show">Change Content</button>
<div class="table-responsive">
   <table id="tabl" class="table table-condensed"></table>            
</div>

And the JS code:

$(document).ready(function() {

$('.deliverable-infos').hide();
$('.dropdown-deliverable').on('click', function(e) {
    console.log("dropdown toggled!");
    e.preventDefault();
    e.stopPropagation();
    //get targeted element via data-for attribute
    var dataFor = $(this).data('for');
    var idFor = $(dataFor);
    idFor.slideToggle();
}); 

});
 $('#show').click(function(){
  var table="<thead><tr><th>Deliverable</th><th>Description</th><th>Ending on</th></tr></thead>";
                table+="<tr class='clickable warning dropdown-deliverable' data-for='#details_1'><td>uranium</td><td>magic potion</td><td>April 23, 2014</td></tr><tr style='padding:0'><td style='padding:0px'></td><td colspan=2 style='padding:0px;'><div class='deliverable-infos' id='details_1'><table class='table table-condensed table-user-content' id='hidden_table_1'><tr><td>نام کالا :</td><td class='right-col'>April 22, 2013</td></tr><tr><td>قیمت :</td><td class='right-col'>500 h</td></tr><tr><td>تخفیف :</td><td class='right-col'>3000 €</td></tr></table></div></td><td style='padding:0'></td><td style='padding:0'></td></tr><tr class='clickable warning dropdown-deliverable' data-for='#details_2'><td>detonator</td><td>magic wand</td><td>April 23, 2014</td></tr><tr style='padding:0'><td style='padding:0'></td><td colspan=2 style='padding:0'><div class='deliverable-infos' id='details_2'><table class='table table-condensed table-user-content' id='hidden_table_2'><tbody><tr><td>Started:</td><td class='right-col'>April 22, 2013</td></tr><tr><td>Load:</td><td class='right-col'>20 h</td></tr><tr><td>Fare:</td><td class='right-col'>200 €</td></tr></tbody></table></div></td><td style='padding:100px'></td><td style='padding:100px'></td></tr>";
                document.getElementById("tabl").innerHTML = table;
 });

But when I run it, it shows me all the table and dynamic side not working at all.

Answer 1

When you use dynamic content on your web page you need to use the following approach to add event listeners:

$(document).on('click', '.dropdown-deliverable', function(e) {
});

in place of :

$('.dropdown-deliverable').on('click', function(e) {

});

It will then work.

Read more about the dynamic event listeners here: http://api.jquery.com/on/#direct-and-delegated-events

UPDATE When using:

$(document).on('click', '.dropdown-deliverable', function(e) {
});

$(document) can be replaced by any static element that is in the page(ie) not generated dynamically.

For example you can use the table id = "tabl" as it is not dymanic on the page, so your code becomes:

$('#tabl').on('click', '.dropdown-deliverable', function(e) {
});