更改事件觸發的選擇框

這裏太早是我的問題的一個簡化版本：更改事件觸發的選擇框

的HTML：

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

jQuery的：

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

問題是當我將鼠標光標移動到選項上時，do stuff發生在我將光標懸停在其中一個選項上時，在我實際選擇新選項之前。我該如何避免這種行爲，以便.change()只有在選擇完成後選擇新選項時纔會觸發？

編輯1：進一步信息

顯然，這代碼不會導致行爲描述。在實際的代碼中，當更多數據通過.get()加載並處理時，選擇框正在更新。

編輯2：實際功能更新一個選擇框

此功能是一個在我的代碼更多的數據加載後，更新的選擇框之一。全局變量padm_courses是一個課程對象數組，它具有用於填充課程過濾器選擇框的code和name屬性。

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

來源

2017-07-24 AntonChanning

要麼使用'$（「＃\\＃mySelect」）'或'id =「mySelect」' – Satpal

是的，對不起，這是我的問題示例代碼中的錯字，而不是我的實際代碼。我編輯它並修復。 – AntonChanning

'當我將鼠標懸停在其中一個選項上時會發生什麼情況'您顯示的代碼中沒有任何內容會導致該行爲。您能否展示更完整的問題示例 –

好吧，我找到了解決辦法。看起來，當觸發時，函數loadCourseFilter每次都從頭開始重新創建選擇框並覆蓋舊選擇框。當鼠標懸停在其中一個選項上時，會造成奇怪的行爲。

功能的修訂版只添加新的選項，如果實際上並沒有添加不更新過濾器...

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

來源

2017-07-25 13:50:05 AntonChanning

試着改變你的改變事件

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

來源

2017-07-24 12:42:45

更改事件觸發的選擇框

回答

相關問題