2017-09-05 4 views
0

Wie der Titel beschreibt, habe ich ein Problem mit der Auswahl von Boxen und feuern die Änderung Ereignis auf ihnen auf iOS Safari. ich den folgenden Code haben:jQuery Auswahl ändert sich jedes Mal auf iOS

$thisPage.find('select#id-attribute').on('change', function (e) { 
    var theId = $(this).val(); 

    $thisPage.find('.place-where-options-get-populated').empty(); 

    if (theId != '') { 
     $.ajax({'type': 'GET', 'url': '/the-actual-url'+ theId, 'dataType': 'json'}) 
      .done(showTemplate) 
      .fail(function(jqXHR, textStatus, errorThrown) { 

      }) 
    } else { 
     showTemplate({}); 
    } 

}).trigger('change'); 

Der obige Code funktioniert auf jeder Änderung ereignis- auf Desktop-Browser, während die Optionen nur auf iOS -die Ausgabeoptionen entsprechend ändern jedes zweite Mal erste Änderung ändern (funktioniert auf , nicht auf der zweiten, funktioniert auf der 3., nicht auf der 4., etc). Ich benutze jQuery v3.2.1

Ein Leitfaden in die richtige Richtung würde sehr geschätzt werden.

bearbeiten: showTemplate() Funktion ist im Grunde die Anforderungen, die ich an den Server tue, und es endet in der folgenden (der Teil, der mit meiner Frage zu tun hat):

$thisPage.find('.place-where-options-get-populated').html(theItems); 

Wenn nun eine console.log auf 'theItems' ausgeführt wird, wird immer zurückgegeben, was zurückgegeben werden soll. Außerdem wird der Inhalt tatsächlich dem entsprechenden Container hinzugefügt, nur dass er nicht auf der Seite angezeigt wird.

+0

Was macht das showTemplate auf Ajax-Anfrage –

+1

nützlichen Link für Sie https://stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-onchange-js-event-when-using-next- on-m – PraveenKumar

+0

@lgkarolos - siehe den Abschnitt Bearbeiten meines Beitrags. – Seb

Antwort

0

Okay, also habe ich dieses Problem behoben, indem ich ein hide() und show() für das letzte Bit der showTemplate() -Funktion hinzugefügt habe. So sieht es so aus:

$thisPage.find('.place-where-options-get-populated').hide().html(theItems).show(); 

Grundsätzlich liegt das Problem genau dort mit der html() -Funktion.

Vielleicht nicht die ideale Lösung, aber es wird den Job machen.

Verwandte Themen