[英]Bootstrap dynamic table not working
我想在代碼中使用Bootstrap動態表。 這是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;
});
但是,當我運行它時,它向我顯示了所有表和動態端都無法正常工作。
當您在網頁上使用動態內容時,您需要使用以下方法來添加事件偵聽器:
$(document).on('click', '.dropdown-deliverable', function(e) {
});
代替:
$('.dropdown-deliverable').on('click', function(e) {
});
然后它將起作用。
在此處閱讀有關動態事件偵聽器的更多信息: http : //api.jquery.com/on/#direct-and-delegated-events
更新使用時:
$(document).on('click', '.dropdown-deliverable', function(e) {
});
$(document)
可以用頁面中沒有動態生成的任何靜態元素替換。
例如,您可以使用表id =“ tabl”,因為它在頁面上不是動態的,因此您的代碼變為:
$('#tabl').on('click', '.dropdown-deliverable', function(e) {
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.