jquery - 当我将 Dropkick 或 MultiSelect 插件添加到 Select 元素样式中时，更改功能停止工作

Question

当我添加用于样式选择或多选元素的插件/小部件时，此更改功能停止工作(Dropkick - http://jamielottering.github.com/DropKick/ 和 jQuery UI MultiSelect Widget http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ ):-(

知道如何解决这个问题吗？

我在将插件添加到 fiddle 中时遇到了一些问题，所以我创建了单独的 fiddle : http://jsfiddle.net/chayanyc/Dhaat/201/ - 有效的功能 http://jsfiddle.net/chayanyc/vWLEn/89/ - 使用 Dropkick 样式的选择元素的功能(不起作用) http://jsfiddle.net/chayanyc/3jr2v/69/ - 通过 UI MultiSelect Widget 设置多选元素样式的功能(不起作用)

var $increase_priority1 = $(".increase_priority1");
$(".trigger_rank1, .complaint select").change(function () {
var name = $(this).data("name"); 
if ($("#Shoulders select").val() === "Too_small" && $(this).val() == 1 && !$(this).data("increase_priority1")) {
    $("<option>", {
        text: name,
        val: name
    }).appendTo($increase_priority1);
    $(this).data("increase_priority1", true); 
}    
if ($(this).data("increase_priority1") && $(this).val() != 1) {
    $("option[value=" + name + "]", $increase_priority1).remove();
    $(this).removeData("increase_priority1");
}
});

Answer 1

自从 DropKick 插件和 MultiSelect Widget 取代了您原来的 <select>使用新的 html 元素(主要是 <div> )，您附加到原始 <select> 的更改事件不会触发，因为它已被替换。

因此，您必须使用插件 API 来分配更改事件处理程序。您链接的两个网站都记录了此内容。

DropKicks 看起来像这样:

$('.change').dropkick({
   change: function (value, label) {
   alert('You picked: ' + label + ':' + value);
  }
});

多选小部件有一个如下所示的点击事件:

$("#multiselect").bind("multiselectclick", function(event, ui){
/*
event: the original event object

ui.value: value of the checkbox
ui.text: text of the checkbox
ui.checked: whether or not the input was checked
    or unchecked (boolean)
*/
});

您必须以这种方式附加更改事件逻辑