Intermittierende jQuery.append() mit $ .ajax und $ .getJSON

Question

Ich habe zwei Auswahllisten. Ich mache einen Ajax-Aufruf, um sie mit .append() zu füllen und habe sowohl $ .ajax als auch $ .getJson ausprobiert, um synchrone und asynchrone Optionen zu bewerten. Entweder mit Typ Anruf Ich kann in der gleichen Sitzung mit und withouth Aktualisierung des Browsers erhalten,:

• Beide
bevölkerten
• One aber nicht die andere
• Weder

Die Server-Antwort kommt zurück mit gültigem JSON.

Unten ist der Ajax-Aufruf mit Schleife. Ich habe keine Konsolenfehler, das Durchlaufen der Serverseite ist in Ordnung. Ich bin mir nicht sicher, wie ich das weiter debuggen und nach einer Anleitung suchen soll.

Wenn etwas falsch im Ajax Anruf oder in der besseren Praxis ist, würde ich mich freuen, das auch zu lernen.

Vielen Dank.

---

EDIT

Nachdem die Ajax-Aufrufe in $ (Wähler) .length gewickelt, obwohl sie in der Benutzeroberfläche sichtbar ist, es kehrt falsch so meine Vermutung ist, dass sie nicht zur Verfügung stehen jQuery zum Anhängen.

Die Auswahllisten sind in einem Bootstrap-Modus, wie unten.

BootstrapDialog.show({ 
         type: BootstrapDialog.TYPE_DANGER, 
         title: '<i class="fa fa-calendar"></i> Create Event', 
         message: '<p><i class="fa fa-clock-o"></i> ' + _when_ + '</p>' + 

             '<select required id="programId" class="calendar_event_input_add form-control"></select>' + 
             '<select required id="taskId" class="calendar_event_input_add form-control"></select>' + 
             '<input required type="text" id="apptEventTitle" class="form-control" placeholder="Short Name" />' + 
             '<textarea required type="text" id="apptEventDescription" class="calendar_event_textarea_add form-control" placeholder="Good Description" rows="3"/></textarea>' + 
             '<input type="text" class="calendar_event_input_add form-control" id="apptEventUrl" placeholder="Reference Link" />' + 
             '<input type="hidden" id="apptStartTime" value="' + start + '" />' + /** start date hidden **/ 
             '<input type="hidden" id="apptEndTime" value="' + end + '" />' + /** end date hidden **/ 
             '<input type="hidden" id="apptAllDay" value="' + allDay + '" />' + /** allday hidden **/ 

             '', 
         buttons: [ 
          { 
           label: '<i class="fa fa-check"></i> Create Event', 
           cssClass: 'btn-success', 
           hotkey: 13, // Enter. 
           action: function (dialogItself) { 
            _calendarEventAdd(); 
            dialogItself.close(); 
            _calendarInstance.fullCalendar('unselect'); 
           } 
          }, 
          { 
           label: '<i class="fa fa-times"></i> Cancel', 
           cssClass: 'btn-default', 
           action: function (dialogItself) { 
            dialogItself.close(); 
            _calendarInstance.fullCalendar('unselect'); 
           } 
          } 
         ] 
        }); 

Answer 1

So. Die Ereignisdelegierung war der Schlüssel, aber in Kombination mit der Verwendung modaler Bootstrap-Ereignisse. Vielen Dank an die Antwort here geschrieben von canon.

Am Ende war es dies:

$(document).on("shown.bs.modal", "#detailedevent", function (e) { 
     $.getJSON('/Programs/GetAll', function (data) { 
      var $select = $('#programId'); 
      //clear the current content of the select 
      $select.empty(); 

      //iterate over the data and append a select option 
      $.each(data, function (key, val) { 
       $select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
      }) 
     }) 

     $.getJSON('/Tasks/GetAll', function (data) { 
      var $select = $('#taskId') 
      //clear the current content of the select 
      $select.empty(); 

      //iterate over the data and append a select option 
      $.each(data, function (key, val) { 
       $select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
      }) 
     }); 
    });