Ereignis ändern Auslösen zu früh auf Auswahlbox

Question

Hier ist eine vereinfachte Version von meinem Problem:

Die HTML:

<select id="mySelect"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select> 

Die jQuery:

$('#mySelect').change(function() { 
    // do stuff 
}); 

Das Problem ist, dass, wenn ich meinen Mauszeiger über die Optionen bewege, do stuff passiert, während ich über eine der Optionen schweben, bevor ich tatsächlich die neue Option auswähle. Wie vermeide ich dieses Verhalten, sodass .change() nur ausgelöst wird, wenn ich eine neue Option in der Auswahl ausgewählt habe?

Edit 1: Weitere Informationen

Anscheinend dieser Code würde nicht dazu führen, Verhalten beschrieben. Im aktuellen Code werden die Auswahlfelder aktualisiert, während weitere Daten über .get() geladen und verarbeitet werden.

Edit 2: Tatsächliche Funktion, aktualisiert eine Auswahlbox

Diese Funktion ist der in meinem Code, der eine der Auswahlboxen aktualisiert nach mehr Daten geladen hat. Die globale Variable padm_courses ist ein Array von Kursobjekten, die über eine code und name Eigenschaft verfügen, die zum Füllen des Kursfilter-Auswahlfelds verwendet wird.

function loadCourseFilter() { 
    var selected = ''; 
    var sel = $('<select>').attr('id','padmCourseFilter'); 
    $(padm_courses).each(function() { 
     sel.append($("<option>").attr('value',this.code).text(this.name)); 
    }); 
    if($('#padmCourseFilter').length) { 
     selected = $('#padmCourseFilter').val(); 
     $('#padmCourseFilter').replaceWith(sel); 
     if(selected != '') $('#padmCourseFilter option[value="'+escape(selected)+'"]').prop('selected', true); 
    } else { 
     sel.appendTo('#padm_hub_filters'); 
    } 

    $('#padmCourseFilter').change(function() { 
     processMCRsByCourse($('#padmCourseFilter').val()); 
     var tables = $('.sv-datatable').DataTable(); 
     tables.rows('.duplicate').remove().draw(); 
     filterTheBlockFilter(); 
    }); 
} 

Answer 1

Okay, ich fand eine Lösung zu verändern. Es sieht so aus, als ob die Funktion loadCourseFilter die Selectbox jedes Mal neu erstellt und die alte überschreibt. Dies verursachte seltsames Verhalten, wenn man über eine der Optionen schwebte.

Eine überarbeitete Version der Funktion nur neue Optionen ergänzt und aktualisiert nicht die Filter, wenn eigentlich nichts hinzugefügt wurde ...

function loadCourseFilter() { 
    var sel, output; 
    if($('#padmCourseFilter').length) { 
     var count = 0; 
     sel = $('padmCourseFilter'); 
     output = []; 

     $(padm_courses).each(function() { 
      if($('#padmCourseFilter option[value="'+this.code+'"]').length == 0) { 
       count++; 
       output.push('<option value="'+this.code+'">'+this.name+'</option>'); 
      } 
     }); 
     if(count > 0) { 
      sel.append(output.join('')); 
      sortDropDownListByText('padmCourseFilter'); 
     } 
    } else { 
     sel = $('<select>').attr('id','padmCourseFilter'); 
     $(padm_courses).each(function() { 
      sel.append($("<option>").attr('value',this.code).text(this.name)); 
     }); 
     sel.appendTo('#padm_hub_filters'); 
    } 

    $('#padmCourseFilter').change(function() { 
     processMCRsByCourse($('#padmCourseFilter').val()); 
     var tables = $('.sv-datatable').DataTable(); 
     tables.rows('.duplicate').remove().draw(); 
     filterTheBlockFilter(); 
    }); 
} 

Answer 2

Versuchen Sie, Ihr Änderungsereignis

$(document).on('change', '#mySelect', function() { 
    // do stuff 
});