我正在尝试获取引导面板显示的事件。我相信面板正在工作,因为更改面板会交换面板上的事件类。但是,事件抓取不起作用。
以下是表格的一部分:
<h4>Discounts</h4>
<ul id="discountTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#brandDiscounts" data-toggle="tab">Brand</a></li>
<li role="presentation"><a href="#genericDiscounts" data-toggle="tab">Discount level</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="brandDiscounts">
<!-- Brand input -->
<select class="form-control" name="brandID">
<option value="0">Select a brand</option>
@foreach($brands as $brand)
<option value="{{$brand->getId()}}">{{$brand->getName()}}</option>
@endforeach
</select>
</div>
<div role="tabpanel" class="tab-pane" id="genericDiscounts">
<!-- Brand input -->
<select class="form-control" name="genericDiscount" disabled>
<option value="0">Select a discount</option>
@foreach(ProductBase::getDiscountLevels() as $discountLabel => $discount)
<option value="{{$discount}}">{{$discountLabel}}</option>
@endforeach
</select>
</div>
</div>
$(document).ready(function(){
updateDiscountInputs();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
updateDiscountInputs();
});
});
/**
* Only the active table input should not be disabled.
*/
function updateDiscountInputs(){
var brandDiscount = $('#brandDiscounts').hasClass('active');
var genericDiscount = !brandDiscount;
$('#brandDiscounts').find('select').prop('disabled', !brandDiscount) ;
$('#genericDiscounts').find('select').prop('disabled', !genericDiscount);
}
首先加载的页面有一个选择框,并以包含上述代码的形式加载选择(通过ajax)。
最佳答案
您的选项卡链接缺少一些重要标签,例如 aria-control
和 role
<ul id="discountTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#brandDiscounts" aria-control="brandDiscounts" role="tab" data-toggle="tab">Brand</a></li>
<li role="presentation"><a href="#genericDiscounts" aria-control="genericDiscounts" role="tab" data-toggle="tab">Discount level</a></li>
</ul>
此外,您还必须在将 html 添加到 DOM 后添加事件监听器。因此,您必须在 $(element).load()
回调函数中添加事件监听器。
例如:
$(element).load(url, function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
console.log("test")
updateDiscountInputs();
});
});
关于javascript - Bootstrap 事件未在 ajax 加载表单中捕获,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46103713/