ブートストラップイベントが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(); 
    }); 
});