javascript - Bootstrap 事件未在 ajax 加载表单中捕获

Question

我正在尝试获取引导面板显示的事件。我相信面板正在工作，因为更改面板会交换面板上的事件类。但是，事件抓取不起作用。

以下是表格的一部分:

<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)。

Answer 1

您的选项卡链接缺少一些重要标签，例如 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();
    });
});