javascript - 监听来自显示 : none to display:block 的任何 div

Question

有什么方法可以监听显示或隐藏的元素吗？

我明确地希望——每当一个元素从隐藏变为显示时——将焦点放在新显示元素中的第一个输入元素上

我想为所有内容附加一个点击事件并将其放在文档的顶部，认为这会在任何事情之前触发并且我可以跟踪被点击元素的 next("div") (或其他东西)会有 none 的 css 显示属性，然后设置一个小超时，然后设置焦点，但是当我尝试访问该 CSS 属性时我得到 undefined

$("html").on("click", "body", function(){
   alert($(this).next("div").css("display")); //undefined
});

有办法吗？

Answer 1

您可以尝试这样的操作(有点像 hack)。如果你在 jQuery 中对 css/show/hide/toggle 原型(prototype)进行猴子修补，你可以测试元素是否在“滴答”(我用了 4 毫秒)后更改它的 :hidden 属性。如果是这样，它已经改变了它的可见性。对于动画等，这可能无法按预期工作，但在其他方面应该可以正常工作。

演示: http://jsfiddle.net/Bh6dA/

$.each(['show','hide','css','toggle'], function(i, fn) {
    var o = $.fn[fn];
    $.fn[fn] = function() {
        this.each(function() {
            var $this = $(this),
                isHidden = $this.is(':hidden');
            setTimeout(function() {
                if( isHidden !== $this.is(':hidden') ) {
                    $this.trigger('showhide', isHidden);
                }
            },4);
        });
        return o.apply(this, arguments);
    };   
})

现在，只需监听 showhide 事件:

$('div').on('showhide', function(e, visible) {
    if ( visible ) {
        $(this).find('input:first').focus();
    }
});

多田!

PS:我喜欢 monkeypatching