Warum funktioniert eine jQuery-Änderungsfunktion nach dem Laden von HTML mit AJAX nicht?

Ich lade ein Formular und fülle dynamisch eine Auswahl über AJAX aus einer PHP-Datei. Vor der Implementierung der dynamischen, mit AJAX gefüllten Auswahl funktioniert meine Änderungsfunktion (sie zeigt nur eine andere Eingabe an, wenn ein Benutzer „Andere“ auswählt). Jetzt funktioniert die Änderungsfunktion nicht.

Ich weiß, dass die Ready-Funktion ausgelöst wird, weil die jStepper-Funktionen ausgeführt werden. Ich habe dies mit der Änderungsfunktion innerhalb und außerhalb der Bereitschaftsfunktion versucht. Ich habe das Gefühl, dass die Änderungsfunktion geladen wird, bevor AJAX fertig ist, aber spielt das wirklich eine Rolle?

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

ändere das:

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

zu

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

EDIT3: Dies würde nach einer genaueren Untersuchung Ihres Codes am besten funktionieren:

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

da es am nächsten an das betreffende Element bindet.

Sie sollten den Ajax-Aufruf auch in das fertige Skript einfügen, würde ich denken.

Der Grund dafür ist, dass es nichts im DOM gibt, an das man sich binden kann, wenn es instanziiert wird. Wenn Sie die .on-Datei auf diese Weise verwenden, wird sie stattdessen an das Dokument gebunden. Wenn Sie ein anderes “festes” Element hätten, das es umschließt, ist es möglicherweise besser, dieses anstelle von “Dokument” zu binden, da es wahrscheinlich eine bessere Leistung erbringen würde.

BEARBEITEN: Beachten Sie, dass Sie das Änderungsereignismanagement auch hinzufügen KÖNNTEN, nachdem Sie das Element als Teil der Ajax-Aufrufvervollständigung eingefügt haben, aber wenn Sie dies mehr als einmal tun, sollten Sie es in diesem Fall zuerst aufheben.

EDIT2: da es Fragen/Anmerkungen gibt: AUS DER DOKUMENTATION: http://api.jquery.com/on/

Das Anhängen vieler delegierter Ereignishandler am Anfang der Dokumentstruktur kann die Leistung beeinträchtigen. Jedes Mal, wenn das Ereignis auftritt, muss jQuery alle Selektoren aller angehängten Ereignisse dieses Typs mit jedem Element im Pfad vom Ereignisziel bis zum Anfang des Dokuments vergleichen. Hängen Sie für eine optimale Leistung delegierte Ereignisse an einem Dokumentspeicherort so nah wie möglich an den Zielelementen an. Vermeiden Sie die übermäßige Verwendung von document oder document.body für delegierte Ereignisse bei großen Dokumenten.

Ich denke, das Element, an das Sie in der Zeile binden:

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

existiert noch nicht im DOM, daher wird das Ereignis nicht gebunden.

Versuchen Sie es mit der .live Funktion:

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

Oder stellen Sie sicher, dass Ihre DOM-Elemente vorhanden sind, bevor Sie versuchen, Ereignisse an sie zu binden.

Gearbeitet von einem Dokument, das bereit ist, die Ajax-Funktionalität zu ändern

$(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");
     }     
  });

});