遍历时JQuery原型无法正常工作

时间:2013-11-18 18:35:31

标签: javascript jquery

我使用以下(http://jsfiddle.net/mkmurray/drv5w/27/)代码允许我覆盖DIV的.show()函数。

<script>
            (function ($) {
            var _oldShow = $.fn.show;

            $.fn.show = function (/*speed, easing, callback*/) {
                var argsArray = Array.prototype.slice.call(arguments),
                    duration = argsArray[0],
                    easing,
                    callback,
                    callbackArgIndex;

                // jQuery recursively calls show sometimes; we shouldn't
                //  handle such situations. Pass it to original show method.
                if (!this.selector) {
                    _oldShow.apply(this, argsArray);
                    return this;
                }

                if (argsArray.length === 2) {
                    if ($.isFunction(argsArray[1])) {
                        callback = argsArray[1];
                        callbackArgIndex = 1;
                    } else {
                        easing = argsArray[1];
                    }
                } else if (argsArray.length === 3) {
                    easing = argsArray[1];
                    callback = argsArray[2];
                    callbackArgIndex = 2;
                }

                return $(this).each(function () {
                    var obj = $(this),
                        oldCallback = callback,
                        newCallback = function () {
                            if ($.isFunction(oldCallback)) {
                                oldCallback.apply(obj);
                            }

                            obj.trigger('afterShow');
                        };

                    if (callback) {
                        argsArray[callbackArgIndex] = newCallback;
                    } else {
                        argsArray.push(newCallback);
                    }
                    obj.trigger('beforeShow');

                    _oldShow.apply(obj, argsArray);
                });
            };
        })(jQuery);
</script>

我有以下HTML代码

<div id="divBeforeHiddenDiv">
foo
</div>
<div id="hiddenDiv" style="display:none">
bar
</div>

然后:

<script>
$('#hiddendiv').bind("beforeShow", function () {
    alert("show event successfully overridden");
});
</script>

我拨打$('#hiddenDiv').show()时效果很好,但是如果我拨打$('#divBeforeHiddenDiv').next().show()隐藏的包含“条形图”的div,但是没有显示警报,那就不行了。

为什么?

更新

根据Bergi的评论,这似乎是一个jQuery问题。如果我在jQuery 1.7.1上使用这个JSFiddle它可以工作但是使用jQuery 1.10.1或更高版本它不会:JSFiddle。有没有比简单降级更好的解决方案?

1 个答案:

答案 0 :(得分:1)

您需要将事件绑定到适当的元素。

从你给出的例子,以及我解释的这段代码

$('#beforeShow').bind("beforeShow", function () {
    alert("show event successfully overridden");
});

应该是

$('#hiddenDiv').bind("beforeShow", function () {
    alert("show event successfully overridden");
});

您希望将事件绑定到隐藏的div。 (或如问题中所述,div在“#divBeforeHiddenDiv”

之后

你也应该改变这篇文章

$('divBeforeHiddenDiv').next().show()

到这个

$('#divBeforeHiddenDiv').next().show()

divBeforeHiddenDiv是一个ID,在第一个代码片段中,jQuery对象中没有id。

JSFiddle