Javascript 引导动态表不工作

我想在代码中使用引导动态表。以下是HTML的代码：

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

更改内容

JS代码：

$(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;
 });

$（文档）.ready（函数（）{
$（'.deliverable infos'）.hide（）；
$（'.dropdown deliverable'）。在（'click'，函数（e）上{
log（“下拉切换！”）；
e、 预防默认值（）；
e、 停止传播（）；
//通过属性的数据获取目标元素
var dataFor=$（this.data（'for'）；
var idFor=$（dataFor）；
idFor.slideToggle（）；
}); 
});
$（“#显示”）。单击（函数（）{
var table=“交付成果说明截止日期”；
表+=“2014年4月23日铀矿药剂：2014年4月23日开始：2013年4月22日负荷：500小时雷管药剂：2014年4月23日开始：2013年4月22日负荷：20小时：200欧元”；
document.getElementById（“tabl”）.innerHTML=表格；
});

---

但当我运行它时，它会向我显示所有的表和动态端根本不工作。

当您在网页上使用动态内容时，您需要使用以下方法来添加事件侦听器：

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

代替：

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

});

然后它就会起作用

在此处阅读有关动态事件侦听器的更多信息：

更新 使用时：

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

$（文档）

可以被页面中的任何静态元素（即非动态生成的元素）替换

例如，您可以使用table id=“tabl”，因为它在页面上不是动态的，所以您的代码变成：

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

---

@太好了。。如果您有任何其他问题，请ping我。抱歉，但我似乎有一个问题：）它在一行中显示所有子数据。我添加了一张它应该是什么和现在是什么的图片。@mjvoodoo看不到图片吗？@mjvoodoo哇！这似乎是一个CSS设计问题。这是CSS代码：。可单击{cursor:pointer；}。右列{text align:left；}是一个向上投票，因为这是JS选择器和事件侦听器中的一个重要主题。