Erhalten Radiobutton Wert des untergeordneten Elements jQuery

Question

Ich versuche, einen AJAX-Suchanruf mit Select2 zu machen. Die Eingabedaten hängen vom ausgewählten Optionsfeld ab, das über dem Auswahlfeld angezeigt wird.

Immer, wenn ich auf die Auswahlbox klicke, sollte der ausgewählte Wert der Optionsfelder darüber gelesen werden und die choice Variable ändern. Wenn ich jedoch auf die Auswahlbox klicke, wird die Variable choice nur einmal geändert. Wenn ich erneut klicke, ändert sich nichts mehr. Warum passiert das und wie kann ich das beheben? Vielen Dank!

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

Hier ist meine 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 

Hier ist die Auswahlbox, nachdem es angeklickt wird:

<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

Versuchen Sie js an sich ändernde:

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 
       }; 

Wenn dynamisch generiert, die DOM-Änderungen sind kein Ereignis in jQuery verbunden, so dass Sie $(document).on('event','element',function(){...}); verwenden, um das Ereignis auf dem Element auszulösen ...