Change function stop working when I add Dropkick o

Question

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?

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

Answer 1

I wanted to leave the full code for other Dropkick users

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

Answer 2

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.

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

DropKicks looks something like this:

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

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