Получить значение кнопки-переключателя дочернего элемента jQuery

Question

Я пытаюсь выполнить поиск по AJAX с помощью Select2. Входные данные зависят от выбранного переключателя, который отображается над полем выбора.

Всякий раз, когда я нажимаю кнопку выбора, необходимо выбрать значение переключателей над ним и изменить переменную choice. Однако, когда я нажимаю selectbox, он меняет переменную choice только один раз. Если я снова нажму, он больше не изменится. Почему это происходит и как я могу это исправить? Благодаря!

<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(){...});, чтобы вызвать событие на элементе ...