Вызов пользовательского плагина jQuery внутри обработчика событий click генерирует ошибку

#javascript #jquery #plugins

#javascript #jquery #Плагины

Вопрос:

Я долго ломал голову над этим вопросом. Я написал несколько пользовательских плагинов и никогда раньше с этим не сталкивался.

Вот мой сценарий. Я написал простой плагин. Затем в обработчике событий click я хочу вызвать свой плагин. Когда я делаю это, я получаю сообщение об ошибке с надписью «Объект не поддерживает свойство или метод «имя плагина»».

Чтобы устранить эту проблему, я удалил все другие скрипты, кроме jQuery и jQuery UI, а также мой пользовательский плагин. Это все еще не устранило проблему. Поэтому, подумав, может быть, у меня был момент, я скопировал пример плагина со страницы jQuery «greenify» и протестировал его с помощью этого. Все тот же результат. Ниже приведен пример того, что я пытаюсь сделать.

Примечание: Странная проблема заключается в том, что когда я вызываю плагин вне обработчика событий ‘click’, он работает просто отлично.

Плагин:

 (function ($){
    $.fn.greenify = function(options){
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "black"
        }, options );
       // Greenify the collection based on the settings variable.
       return this.css({
        color: settings.color,
        backgroundColor: settings.backgroundColor
    });
};
}( jQuery ));
 

Затем два примера вызова плагина 1) вне события и 2) внутри события:

 <script type="text/javascript" src="mypluginloaction.js"></script>
<script type="text/javascript">
  $(function(){

    //This works!
$('a').greenify();


$('.post-box-left').on('click', function(){
            //This does not work
    $('a').greenify();
    $('#blurBackground').show();
    $('#popupWindow').show();
});
</script>
 

Что действительно раздражает, так это то, что когда я jsFiddle, плагин работает. То, что я ищу, — это предложения о том, почему это могло произойти. Я попробую что-нибудь. Спасибо!


Обновить:

Еще немного пораскинув мозгами, я нашел, в чем заключалась моя проблема, но я не уверен на 100%, как ее решить.

В другом $(function(){}); Я вызываю $().load() для загрузки ajax-страницы. Если я удалю его, все будет отлично работать.

 $(function(){
    /* Removing this makes it work!
        $('#Poll').load('AJAX/Poll.asp');
    */
});
 

Есть идеи, почему?

Комментарии:

1. Вы хотите сказать, что если вы jsFiddle используете ту же настройку, это работает?

2. Да, я только что обновил свой пост новым фактом. Похоже, что причиной проблемы является функция load().

3. Поскольку я только что задал свой вопрос, я не могу на него ответить, когда смогу, я дам полный ответ, но проблема заключалась в том, что при загрузке страницы в ajax была ссылка на другую библиотеку jQuery, поэтому она перезаписывала мой плагин.

Ответ №1:

Мне удалось найти первопричину. Я загружал страницу через ajax (написанную кем-то другим), на которой был вызов другого экземпляра jQuery. Поскольку этот вызов был после моего включения плагина и перед вызовом моего кода, он перезаписывал экземпляр jQuery. Я предполагаю, что именно поэтому он запускался во время подготовки документа, но не внутри коллекции jQuery.