JS-код не работает для представлений, загруженных ajax

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 классы от исходных элементов на моих пересмотренных элементах, я сделал это только для того, чтобы доказать, что вы можете сохранить свои оригинальные классы, которые могут различать элементы (разные стили и т. д.), оставаясь ненавязчивым.