使用"on"的jQuery Multiselect委托事件. [英] jQuery Multiselect delegate event using "on"
问题描述
我熟悉使用"on"来确保我的jquery方法处于活动状态(因为我是通过Ajax呈现页面的.)
I am familiar with using "on" for making sure my jquery methods are active (since I render pages via Ajax).
例如:
$('body').on( 'click', '#demobutton', function (event) {
alert("CliCKED!");
});
但是我需要对jQuery Multiselect做同样的事情.仅当重新加载页面时,以下内容才有效.但是,如果我的内容是通过Ajax加载的,则MultiSelect根本不会呈现.
However I need to do the same for jQuery Multiselect. Below works only when the page is reloaded. However if my content is loaded via Ajax, MultiSelect does not render at all.
$("select").multiselect({
click: function(event, ui){
alert(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
},
beforeopen: function(){
$callback.text("Select about to be opened...");
},
open: function(){
$callback.text("Select opened!");
},
beforeclose: function(){
$callback.text("Select about to be closed...");
},
close: function(){
$callback.text("Select closed!");
},
checkAll: function(){
$callback.text("Check all clicked!");
},
uncheckAll: function(){
$callback.text("Uncheck all clicked!");
},
optgrouptoggle: function(event, ui){
var values = $.map(ui.inputs, function(checkbox){
return checkbox.value;
}).join(", ");
alert("CheckboXES " + (ui.checked ? "checked" : "unchecked") + ": " + values);
}
});
所以问题是如何使用$('body').on这样的格式重写上面的内容?谢谢你的帮助.新手在这里!
So the question is how to rewrite above using a format such as $('body').on ? Thanks for any help. Newbie here!
推荐答案
自您指定以来(但是,如果我的内容是通过Ajax加载的,MultiSelect根本不会呈现.)
since you specified (However if my content is loaded via Ajax, MultiSelect does not render at all.)
在这里,我正在使用ajax加载选择选项并绑定multiselect jsfiddle .让我知道这是否对您有帮助.
here i am loading select options with ajax and binding multiselect jsfiddle . Let me know if this helps you.
$(document).ready(function(e) {
var form_data = $("#frm").serialize();
var form_url = $("#frm").attr("action");
var form_method = $("#frm").attr("method").toUpperCase();
$("#loadingimg").show();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false,
success: function(returnhtml){
alert('binded options to select on ajax success');
$.when(assignOptions()).done(function(){
bind();
});
}
});
});
function assignOptions(){
$("#display_list").append('<option value="W1">VICccccc</option><option value="W2">NSW</option><option value="W6">TAS 3</option>');
}
function bind(){
$("select").multiselect({
click: function(event, ui){
alert(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
},
beforeopen: function(){
$callback.text("Select about to be opened...");
},
open: function(){
$callback.text("Select opened!");
},
beforeclose: function(){
$callback.text("Select about to be closed...");
},
close: function(){
$callback.text("Select closed!");
},
checkAll: function(){
$callback.text("Check all clicked!");
},
uncheckAll: function(){
$callback.text("Uncheck all clicked!");
},
optgrouptoggle: function(event, ui){
var values = $.map(ui.inputs, function(checkbox){
return checkbox.value;
}).join(", ");
alert("CheckboXES " + (ui.checked ? "checked" : "unchecked") + ": " + values);
}
});
}
这篇关于使用"on"的jQuery Multiselect委托事件.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!