creating a selector that works on visible items, also if they were initially loaded as display:none

Question

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?

Answer 1

Where the event is defined ? If the element is not visible at start you have to use the live() function to affect it.

Answer 2

perform the selection var product = $('#selProduct:visible'); in an event which occurs after the page has loaded and the elements have been made visible.