Ошибка при подключении jQuery

Question

Я использую jquery 1.9.1, и я пытаюсь разработать плагин. Проблема в том, что плагин не работает. Вот код:

;(function($) { 

    $.fn.single = function() { 

     return this.each(function(){ 

      // Get the instance 
      var element = $(this); 

      // Resize the "data-target" divs 
      element.load(function(){ 
       changeCSS(element); 
      }); 

      // Bind the method to the resize window event 
      $(window).bind("resize", function(){ 
       changeCSS(element); 
      }); 

     }); 

    }; 

    // function to resize all the "data-target" divs 
    function changeCSS(element) { 

     // Grab the screen resolution 
     var windowWidth  = $(window).width(); 
     var windowHeight = $(window).height(); 
     // Count how many targets the div has 
     var targetsSize  = $("[data-target]").size(); 

     // Resize the parent div 
     $(element).css({ 
      "width" : windowWidth, 
      "height": windowHeight * targetsSize 
     }); 

     // Resize all the targets div 
     $(element + "> div[data-target]").each(function(){ 
      $(this).css({ 
       "width" : windowWidth, 
       "height": windowHeight 
      }); 
     }); 

    } 

})(jQuery); 

И я звоню его на документе, как что:

<script src="js/jquery-1.9.1.min.js"></script> 
    <script src="js/single-0.1.0.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#single").single(); 
     }); 
    </script> 

Там нет никаких проблем в консоли. Что я делаю неправильно?

Answer 1

Я предполагаю, что это связано с неправильным использованием метода . Загрузить. Если вы посмотрите на документы JQuery, он предназначен для:

.load(): Загрузка данных с сервера и поместить возвращенный HTML в совпавшего элемента.

http://api.jquery.com/load/

Удалить строки element.load(function ..., просто вызовите вашу функцию changeCSS, вы уже загружается это расширение document.ready

return this.each(function() { 
     // ... 

     changeCSS(element); // <-- just run the function right away 

     // ... etc 
    }); 

Answer 2

Вообще это плохая практика, чтобы вызвать функцию перед это объявлено. Чтобы правильно установить плагин, вам лучше начать правильно структурировать его с самого начала. Кроме того, как указывает @mcpDESIGNS, вы используете метод .load неправильно. Кроме того, было бы полезно, если бы вы объяснили, что именно вы пытаетесь сделать здесь.

Чтобы получить хорошее начало создания плагинов jQuery, попробуйте посмотреть документацию в jQuery here или вы можете посмотреть this учебник.

Это предпочтительная структура:

(function($) { 

    // Declare your methods at the beginning of your plugin 
    var yourMethods = { 
    'methodOne' : function() { 

    }, 
    'methodTwo' : function() { 

    } 
    }; 

    $.fn.pluginName = function() { 

    return this.each(function() { 

    }); 

    } 
}(jQuery)); 

Answer 3

Вместо:

element.load(function(){ 
    changeCSS(element); 
}); 

я сделал:

changeCSS(element); 

И ... Вместо того, чтобы:

$(element + "> div[data-target]") 

я сделал:

$(element).children('div[data-target]') 

А теперь плагин выполняется без каких-либо ошибок или ошибок. Спасибо, ребята!