子要素jQueryのラジオボタン値を取得

Question

私はSelect2でAJAX検索呼び出しをしようとしています。入力データは、選択フィールドの上に表示される選択されたラジオボタンに依存します。

選択ボックスをクリックするたびに、その上にあるラジオボタンの選択値を読み取って、choice変数を変更する必要があります。しかし、選択ボックスをクリックすると、choice変数が1回だけ変更されます。もう一度クリックすると、それ以上変更されません。なぜこれが起こり、どのように修正できますか？ありがとう！

<div class="group"> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partner"> 
     {{Form::radio('partnersupplier', 'partner', true, array('class' => 'mdl-radio__button partnersupplier', 'id' => 'partner'))}} 
     <span class="mdl-radio__label">Partner </span> 
    </label> 
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect margin-radio" for="supplier"> 
     {{Form::radio('partnersupplier', 'supplier', false, array('class' => 'mdl-radio__button partnersupplier', 'id' => 'supplier'))}} 
     <span class="mdl-radio__label">Leverancier </span> 
    </label> 
    <div class="form-group" > 
     <label for="x">label<br></label> 

     <select id="x" name="x" class="searchselect searchselectstyle partnersupplierselect"> 
     </select> 

    </div> 
</div> 

はここにここに私のJS

var choice = 'partner'; 

    $('.partnersupplierselect').on('click', function(){ 
     var group = $(this).parent().parent(); 
     choice = group.find('.partnersupplier:radio:checked').val(); 
     console.log(choice); 

     group.find('.partnersupplierselect').select2({ 
      ajax: { 
       dataType: "json", 
       type: "POST", 
       data: function (params) { 
        return { 
         term: params.term, 
         '_token': token, 
         'choice': choice 
        }; 

        // the rest is just the Select2 initialization 
        // console.log only gives once the value when I click it, and then never again 

だ、それがクリックされています後に選択ボックスです：

<div class="form-group"> 
    <label for="yearlypartnersuppliermaintainance">Kies partner/leverancier jaarlijks onderhoud<br></label> 
    <select id="yearlypartnersuppliermaintainance" name="yearlypartnersuppliermaintainance" class="searchselect searchselectstyle partnersupplierselect select2-hidden-accessible" tabindex="-1" aria-hidden="true"> 
    </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 250px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-yearlypartnersuppliermaintainance-container" aria-owns="select2-yearlypartnersuppliermaintainance-results"><span class="select2-selection__rendered" id="select2-yearlypartnersuppliermaintainance-container"></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> 
</div> 

Answer 1

にあなたのjsを変更してみてください：動的に生成されたとき

var choice = 'partner'; 

$(document).on('click', '.partnersupplierselect', function(){ 
    var group = $(this).parent().parent(); 
    choice = group.find('.partnersupplier:radio:checked').val(); 
    console.log(choice); 

    group.find('.partnersupplierselect').select2({ 
     ajax: { 
      dataType: "json", 
      type: "POST", 
      data: function (params) { 
       return { 
        term: params.term, 
        '_token': token, 
        'choice': choice 
       }; 

、 DOMの変更はイベントではありませんjQueryでリンクされているので、$(document).on('event','element',function(){...});を使用して要素のイベントをトリガーします。