$ ('option'). Событие mousedown не работает в нескольких случаях

Question

Я использую функцию $ ('option'). Mousedown, чтобы разрешить множественный выбор для моего множественного списка выбора.

Он работает, когда создается множественный список выбора при загрузке страницы.

Но это не работает для нескольких списков выбора, которые были созданы с использованием функции javascript.

Ниже мой MouseDown код события

 $('option').mousedown(function(e) {// alert('dsds'); 
      e.preventDefault(); 
      $(this).prop('selected', $(this).prop('selected') ? false : true); 

      return false; 
     }); 

Ниже приводится список, который я строить с помощью JavaScript.

 $.each(vellalarSubCastList, function(j, option) { 

     var $option = $("<option>", {text: option.name, value: option.id}); 
     $option.appendTo($indiaSubCastes); 
    }); 

Answer 1

Очень возможно, вы крепление «MouseDown» событие, прежде чем вы генерирующий список опций. Попробуйте вызвать его после создания списка.

В качестве альтернативы, вы изучили использование атрибута «multiple»?

http://www.w3schools.com/tags/att_select_multiple.asp

Или просто использовать плагин как https://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

Answer 2

Я согласен с Ting Сеном, что вы прикрепляя обработчик перед созданием option с. Вы можете привязать обработчик только к элементу, который уже существует в DOM.

Это может быть просто исправлено путем изменения порядка в вашем коде, если список генерируется один раз при загрузке страницы. В противном случае вы должны использовать делегированный обработчик, например:

$('select').on('mousedown' ,'option' ,function(e) {// alert('dsds'); 
     e.preventDefault(); 
     $(this).prop('selected', $(this).prop('selected') ? false : true); 

     return false; 
    }); 

Обработчика прикрепляется к select элементу, но инициируется mousedown любого ребенком option элемента. Этот второй параметр фильтрует, какие дочерние элементы получат событие в первом параметре. И это работает независимо от того, когда они добавляются в DOM.

Если select также генерируется динамически, и после этого вы не можете прикреплять обработчик, вы можете прикрепить его к div или любому другому элементу, к которому вы прикрепляете свой список.

Этот способ также рекомендуется в целом, так как вам нужно только прикрепить один обработчик в список select. Использование $('option') будет означать, что отдельный обработчик привязан к каждому option в документе. Хотя это хорошо с меньшими списками, он менее эффективен по мере того, как он становится длиннее.