将Dropkick或MultiSelect插件添加到样式选择元素时,更改功能停止工作

Question

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

知道怎么解决这个问题吗？

将插件添加到小提琴中时遇到了一些麻烦,所以我创建了单独的小提琴:http: //jsfiddle.net/chayanyc/Dhaat/201/ - 功能有效 http://jsfiddle.net/chayanyc/vWLEn/89/ -使用由Dropkick设计的Select元素的功能(不起作用) 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>'s)替换原始内容,因此附加到原始内容的更改事件<select>将不会因为已被替换而触发.

因此,您必须使用插件api来分配更改事件处理程序.您链接的两个站点都有此文档.

DropKicks看起来像这样:

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

Multiselect Widget有一个如下所示的click事件:

$("#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)
*/
});

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