将Dropkick或MultiSelect插件添加到样式选择元素时，更改功能停止工作 [英] Change function stop working when I add Dropkick or MultiSelect plugins to style Select elements

问题描述

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

This Change function stops working when I add either of the plugins/widgets I use for styling Select or Multi-Select elements (Dropkick - http://jamielottering.github.com/DropKick/ and jQuery UI MultiSelect Widget http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/) :-(

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

Any idea how to get around this?

我在插件中添加插件时遇到了一些麻烦，所以我创建了单独的小提琴：
http://jsfiddle.net/chayanyc/Dhaat/201/ - 有效的功能
http://jsfiddle.net/chayanyc/vWLEn/89/ - 由Dropkick设计的Select元素的功能（不工作）
http：// jsfiddle .net / chayanyc / 3jr2v / 69 / - 由UI MultiSelect小部件设置的多选元素功能（不起作用）

I had some trouble adding the plugin to the fiddle, so I created separate fiddles: http://jsfiddle.net/chayanyc/Dhaat/201/ - Function that works http://jsfiddle.net/chayanyc/vWLEn/89/ - Function with Select elements styled by Dropkick (doesn't work) http://jsfiddle.net/chayanyc/3jr2v/69/ - Function with Multi-Select elements styled by UI MultiSelect Widget (doesn't work)

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");
}
});

推荐答案

由于DropKick插件和MultiSelect Widget取代原来的< select> 包含新的html元素（主要是< div> '），您附加到自己的更改事件原始< select> 将不会触发，因为它已被替换。

Since the DropKick plugin and MultiSelect Widget replace your original <select> with new html elements (mainly <div>'s), the change event you attached to your original <select> won't fire because it has been replaced.

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

Therefore you must use the plugins api to assign change event handlers. Both sites you linked have this documented.

DropKicks看起来像这样：

DropKicks looks something like this:

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

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

The Multiselect Widget has a click event that looks like this:

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

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

You'll have to attach your change event logic that way

这篇关于将Dropkick或MultiSelect插件添加到样式选择元素时，更改功能停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！