javascript - 多个选择框选项的 HTML "multiple"无法识别点击以及 jquery 的委托(delegate)功能

Question

我将 html multiple 用于多个选择框下拉列表。单击任何选项时，我都会添加 css 类 permissionsSelection 将其背景颜色更改为黄色，以显示所选选项。如果再次单击选定的选项，它将取消选择并且类 permissionsSelection 删除

CSS

.permissionsSelection{
   background:yellow;
 }

Jquery

$("#availablePermissions").delegate(".permissions", "click", function(e) {

        if($(this).hasClass("permissionsSelection")){
            $(this).removeClass("permissionsSelection");
        }
        else{
            $(this).addClass("permissionsSelection");
        }

    });

HTML

<select class="multipleSelectBox" multiple name="availablePermissionsEdit"  id="availablePermissionsEdit">                              <option id="itemId1Edit1" value="option1" class="permissions">option1</option>
<option id="itemId1Edit2" value="option2" class="permissions">option2</option>                                          <option id="itemId1Edit3" value="option3" class="permissions">option3</option>      
</select>

这在所有浏览器中都能正常工作。像往常一样不能在 IE8 中工作。

点击委托(delegate)功能没有触发，我也尝试过实时、打开和点击代替委托(delegate)，但没有一个适合我。

请帮助我摆脱 IE

Answer 1

在IE浏览器中select > option click event does not work,如果你想实现那么请使用selected value for targeted event,请试试这段代码

$(window).load(function() {
   $("#availablePermissionsEdit").on("click", function(e) { 
     $target = $(this).find("option[value="+this.value+"]");
     if ($target.hasClass("permissionsSelection")) {
         $target.removeClass("permissionsSelection");
     }else {
         $target.addClass("permissionsSelection");
    }
 });

});

注意 请确保选项值应该是唯一的。

JSFIDDLE DEMO