Question

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

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

我在将小插件添加到小提琴时遇到了一些麻烦，所以我创建了单独的小提琴： 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小部件用新的html元素（主要是<select>）替换原始<div>，因此附加到原始<select>的更改事件不会触发因为它已被替换。

因此，您必须使用插件api来分配更改事件处理程序。您链接的两个站点都记录了这一点。

DropKicks看起来像这样：

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

Multiselect Widget有一个如下所示的点击事件：

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

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

Answer 2

我想留下其他Dropkick用户的完整代码

var $increase_priority1 = $(".increase_priority1");
$('.trigger_rank1, .complaint select').dropkick({
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");
    }
}
});

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

2 个答案: