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

我有以下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                        
                    });            
        });

我必须把这段代码放在任何地方。

---

可能是，有最好的解决方案吗？

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

我所看到的最简单的方法是，使用一组标准的Css类名，您可以使用代码中定义的默认类名，并定义一个通用回调方法

我这里没有你的HTML，所以我在瞎飞。但在要素方面：

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

每个请求都可以调用它

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

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

---

此外，在本例中，我在修改后的元素中保留了原始元素中的expand和voice_block类，我这样做只是为了证明您可以保留原始类，这些类可以区分不同样式的元素等，同时保持低调。

谢谢。我听到你的留言了。我试试看。

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

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