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

Lesezeit: 4 Minuten

Benutzer-Avatar
Ahhchuu

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

  • Mögliches Duplikat der Ereignisbindung für dynamisch erstellte Elemente?

    – Showdev

    5. Juli 2016 um 22:27 Uhr

Benutzer-Avatar
Markus Schultheiss

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

  • Ja! Genial, du hast es behoben. Könnten Sie vielleicht erklären, warum es so funktioniert und nicht anders?

    – ahhchuu

    29. März 2012 um 16:38 Uhr

  • Achten Sie darauf, wie viele Elemente Sie an $ (document) binden – es ist besser, an ein Element so nahe wie möglich an den Selektor zu binden (das wird natürlich nicht durch eine DOM-Modifikation ersetzt).

    – Mikevoermans

    29. März 2012 um 16:44 Uhr


  • @mikevoermans – genau deshalb habe ich den Hinweis bezüglich des näheren Elements und der Option zum Hinzufügen am Injektionspunkt hinzugefügt.

    – Mark Schultheiss

    29. März 2012 um 16:46 Uhr

  • @Sinan .live bindet anders und ist daher langsamer – es wird empfohlen, .on in der Dokumentation zu verwenden

    – Mark Schultheiss

    29. März 2012 um 17:26 Uhr


  • Ich habe ein Beispiel für eine engere Bindung der .on für dieses spezielle Beispiel angesichts der Kommentare hinzugefügt.

    – Mark Schultheiss

    29. März 2012 um 17:41 Uhr

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.

  • das .on( Syntax wird gegenüber bevorzugt .live( und wird besser funktionieren, besonders wenn es näher an das betreffende Element gebunden ist.

    – Mark Schultheiss

    29. März 2012 um 16:47 Uhr

  • Siehe das neueste Beispiel meiner Antwort zum Binden näher sowie einige Hinweise zur Leistung. live bindet immer an das Dokument ist mein Verständnis.

    – Mark Schultheiss

    29. März 2012 um 17:42 Uhr

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

});

1017830cookie-checkWarum funktioniert eine jQuery-Änderungsfunktion nach dem Laden von HTML mit AJAX nicht?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy