Question

我有以下javascript代码（不是我的）：

(function ($) {
    // Code goes here
    $.fn.switcher = function (opts) {
        var defaults = {
            btn: '.info_btn', // button class
            block: '.details_info', //block for hide
            hideifout: false, 
            classActive: 'open' 
            //classNotActive:'close'
        };
        var options = $.extend(defaults, opts);
        this.each(
            function () {
                var $this = $(this);
                var btn = $this.find(options.btn);
                var block = $this.find(options.block);
                var plaing = false;
                var click = function (e) {
                    if (e.type == 'mouseleave') {
                        e.stopPropagation();
                    }
                    if (plaing) return;
                    plaing = true;
                    if (block.is(':visible')) {
                        block.hide('blind', function () {
                            btn.removeClass(options.classActive);
                            btn.css('z-index', 0);
                            plaing = false;
                        });
                    } else {
                        btn.addClass(options.classActive);
                        btn.css('z-index', 2);
                        block.show('blind', function () {

                            plaing = false;
                        });
                    }
                }

                btn.click(click);
                if (options.hideifout) {
                    block.mouseleave(click);
                }

            }
        );
    }
})(jQuery);

此代码展开/缩小div块。此代码位于main.js文件中。 main.js包含在母版页中。它适用于非ajax请求。对于ajax加载的局部视图，它不起作用。我的解决方案是：

$('#somediv').load('some action', function () {

            $('.infoBlock').switcher();

            $('div.widgets').switcher(
                    {
                        btn: '.expand',
                        block: '.voice_block',
                        hideifout: true                        
                    });            
        });

我必须把这段代码放在一边可能是，有最好的解决方案吗？

Answer 1

您必须执行此操作的原因是因为原始代码在文档加载时绑定事件。因此，在Ajax请求完成加载并将新元素添加到DOM之后，您必须进行相同的调用。

我能看到的最简单的方法是阻止你不得不做你当前正在做的事情就是依赖你可以使用的一组标准的Css类名（在你的代码可以工作），并定义了一个通用的回调方法。

我这里没有你的HTML，所以我会盲目飞行。但是关于要素：

<div class="expand">...</div> 
<div class="voice_block"> ... </div>

你会：

<div class="expand info_btn">...</div> 
<div class="voice_block details_info"> ... </div>

然后你可以有一个功能

function genericCallback(){
 $('body').switcher();
}

每次请求都可以调用

$('#somediv').load('some action', genericCallback);

显然，这可以通过调整来提高性能，因为这只是一个概念证明。例如，根据您的DOM的大小，在switcher()调用期间执行所有元素的枚举可能是不可取的。

另外，在这个示例中，我将expand和voice_block类保留在我修改过的元素上的原始元素中，我只是这样做是为了证明你可以保留原来的类可以区分元素（不同的风格等），同时保持不引人注目。

JS代码不适用于ajax加载的视图

1 个答案: