Dlaczego funkcja zmiany jQuery nie działa po załadowaniu html przy pomocy AJAX?

Question

Załaduję formularz i dynamicznie wypełniam zaznaczenie przez AJAX z pliku PHP. Przed zaimplementowaniem dynamicznego AJAX populated select, moja funkcja zmiany działa (pokazuje tylko inne wejście, gdy użytkownik wybierze "inne"). Teraz funkcja zmiany nie działa.

Wiem, że funkcja Ready jest uruchamiana, ponieważ działają funkcje jStepper. Próbowałem tego z funkcją zmiany w funkcji gotowości i poza nią. Mam wrażenie, że funkcja zmiany ładuje się zanim AJAX się zakończy, ale czy to naprawdę ma znaczenie?

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>"; 
var d = new Date(); 
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type) 
{ 
    $($type).find('type').each(function() 
    { 
     types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>"; 
    }); 
    types += "<option value='other'>Other(Specify)</option></select>"; 
    $('#ve_categoryNo_td').html(types); 
}); 
$(document).ready(function() 
{ 
    $('input[type=text]').click(function() 
    { 
     $(this).select(); 
    }); 
    $('#vehicle_entry').ajaxForm(function() 
    { 
     showMessage('vehicle_information_added'); 
    }); 
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999}); 
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999}); 
    $('#ve_vehicleYear').jStepper(); 
    $('#ve_purchasePrice').jStepper({minValue: 0}); 
    $('#ve_categoryNo').change(function() 
    { 
     if ((this.value) == "other") 
     { 
      $('#otherCategory').show(); 
      $('#otherCategory input[type=text]').focus(); 
     } else 
     { 
      $('#otherCategory').hide(); 
     } 
    }); 
}); 

Answer 1

zmodyfikować to:

$('#ve_categoryNo').change(function() { 

do

$(document).on('change', '#ve_categoryNo', function() { 

Edit3: To byłoby wykonać najlepiej po zbadaniu kodu ściślej:

$('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() { 

jak to wiąże się najbliżej danego elementu.

---

Należy również umieścić wywołanie ajax wewnątrz gotowego scenariusza byłoby myślę.

Powodem tego jest fakt, że w DOM nie ma nic, co można by powiązać z instancją. Użycie .on w ten sposób wiąże go z dokumentem. Jeśli masz inny "ustalony" element, który go zawinie, lepiej będzie powiązać go z tym, używając zamiast "dokumentu", ponieważ prawdopodobnie byłby lepszy.

EDYCJA: Zauważ, że MOŻESZ również dodać zarządzanie zmianą zmian po wstrzyknięciu elementu jako części zakończenia połączenia ajax, ale jeśli zrobisz to więcej niż raz, powinieneś najpierw go rozwiązać.

EDIT2: ponieważ istnieje pytania/komentarze: Z dokumentacji: http://api.jquery.com/on/

Dołączanie wielu delegowanych obsługi zdarzeń w górnej części drzewa dokument może obniżyć wydajność. Za każdym razem, gdy wystąpi zdarzenie, jQuery musi porównać wszystkie selektory wszystkich dołączonych zdarzeń tego typu do każdego elementu w ścieżce od celu zdarzenia aż do początku dokumentu . Aby uzyskać najlepszą wydajność, dołącz delegowane zdarzenia do lokalizacji dokumentu możliwie najbliższej elementom docelowym. Unikaj nadmiernego używania dokumentu lub dokumentu dla dokumentów delegowanych na dużych dokumentach .

Answer 2

myślę element jesteś wiązanie się w linii:

$('#ve_categoryNo').change(function() { ... 

jeszcze nie istnieje w DOM, więc zdarzenie nie ma nic związanego.

Spróbuj użyć funkcji .live:

$('#ve_categoryNo').live('change', function() { ... }); 

lub upewnij się, że istnieją elementy DOM przed próbą związania zdarzenia do nich.

Answer 3

Pracował z dokumentu gotowy zmienić działa funkcjonalność Ajax

$(document).change(function(){ 
    $("#next").click(function() { 
    var questionid = $('#question').val();   
    var assementid = $('#assement').val();   
    var userid  = $('#user').val();   
    if($('.ansradio').is(':checked')) { 
     var answer = $('input[name=ans]:checked', '#questionajax').val(); 
     $.ajax({ 
      type: "POST", 
      url: "answer/", 
      data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid, 
      success: function(html){ 
       $("#questionajax").html(html).show(); 
      } 
     }); 
    } 
    else{ 
     alert("Please answer the questions"); 
    }  
    }); 

});