$('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 Sung 在创建 options 之前附加处理程序的观点。您只能将处理程序附加到 DOM 中已存在的元素。

如果列表在页面加载时生成一次，则可以通过更改代码中的顺序来简单地解决此问题。否则，您应该使用委托处理程序，如下所示：

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

      return false;
  });

处理程序附加到select 元素，但由任何子option 元素上的mousedown 触发。第二个参数过滤哪些子元素将接收第一个参数中的事件。无论何时将它们添加到 DOM，这都有效。

如果 select 也是动态生成的，并且在此之后您无法附加处理程序，则可以将其附加到 div 或您要附加到列表的任何其他元素。

通常也建议使用这种方式，因为您只需为每个select 列表附加一个处理程序。使用$('option') 意味着将一个单独的处理程序附加到文档中的每个option。虽然这适用于较小的列表，但随着列表变长，效率会降低。