创建一个适用于可见项的选择器,如果它们最初加载为display:none

时间:2010-10-06 08:20:03

标签: javascript jquery events

我有一种以这种方式定义的方法:

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

如您所见,选择器具有:visible过滤器。当初始元素可见时,此代码可以正常工作。但不适用于加载display:none的项目。我使用show()使div可见但是事件没有被拾取。事件在selectProduct方法中定义。

如何确保这对页面加载后可见的项目起作用?

2 个答案:

答案 0 :(得分:0)

事件的定义? 如果元素在开始时不可见,则必须使用live()函数来影响它。

答案 1 :(得分:0)

在页面加载并且元素可见后发生的事件中执行选择var product = $('#selProduct:visible');