creating a selector that works on visible items, also if they were initially loaded as display:none
I have a method defined this way:
var product = $('#selProduct:visible');
var note=$('#bbdata');
product.selectProduct({
target: note,
url: 'product.php',
data: { ajax: true }
}).trigger('change');
$.fn.selectProduct= function (options) {
var defaults = {
key: "id",
value: "label"
};
var settings = $.extend({}, defaults, options);
if (!(settings.target instanceof $)) settings.target = $(settings.target);
return this.each(function () {
开发者_运维百科var $$ = $(this);
$$.bind('change isVisible', function () {
var data = null;
if (typeof settings.data == 'string') {
data = settings.data + '&' + this.name + '=' + $$.val();
} else if (typeof settings.data == 'object') {
data = settings.data;
data[this.name] = $$.val();
}
$.ajax({
url: settings.url,
data: data,
type: (settings.type || 'get'),
dataType: 'html',
success: function (j) {
settings.target.html(j);
}
}); // ajax
}); //change isVisible
}); // new function
}; // function
function show_product() {
hide_group2();
$("#product_zone2").show('fast', function(){
$("#selProduct").trigger('isVisible');
});
}
As you see the selector has the :visible
filter. This code works ok, when the initial element is visible. But doesn't work on the items that are loaded with display:none
. I made the div visible by using show() but the events are not picked up. The events are defined in the selectProduct method.
How can I make sure that this works on the items that were made visible after the page have loaded?
Where the event is defined ? If the element is not visible at start you have to use the live() function to affect it.
perform the selection var product = $('#selProduct:visible');
in an event which occurs after the page has loaded and the elements have been made visible.
精彩评论