Question

我知道我有一个错误，我感觉很新，但我需要寻求帮助。这是我需要解决的代码。我收到了以下错误：Uncaught TypeError: Cannot read property 'find' of undefined

 <div class="plugin" data-plugin="true"></div>

   <script>window.jQuery || document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"><\/script>')</script>
 <script>
         ;(function($){
     var namespace = 'plugin';

     function Plugin(element,options){
       this.settings = options;
       this.version = '0.0.1';
       this.$element = element;
       this.init();
     }

     Plugin.prototype.formatString = function(key,val){
       return this.$element.find('ul').append('<li><strong>' + key.toUpperCase() + ':</strong> ' + val + '</li>');
     };

     Plugin.prototype.printSettings = function(){
       this.$element.append('<ul>');

       $.each(this.settings, this.formatString);
     };

     Plugin.prototype.init = function(){
       this.printSettings();
     };

     $('.plugin').each(function(key,val){
       if (!$(this).data[namespace]) $(this).data[namespace] = new Plugin($(this),$(this).data());
     });
   })(window.jQuery);
     </script>

this.$element.find('ul')似乎是导致错误的代码。我试图将空<ul></ul>标记添加到空div但是没有做任何事情。我觉得.find并没有被弃用，看起来我正确地格式化了这个，但我打赌我错了。

Answer 1

//评论 - 在这个实例中，jquery不需要使用find。我认为插件类的div只是坐在页面上，只需要一个简单的参考。

所以说实话，我可以使用一些帮助来解释为什么这样做，以及正确的术语，为什么这样我可以更好地教育我自己，而不是问这些愚蠢的问题。

最后我最终删除了.find，因为jQuery不需要它用于此实例。元素被定义，所以我知道一些东西没有输出到div。我最终玩弄了一下，并将错误发现到可以使用Google Chrome进一步调查的地方。

现在我只是将这个元素作为div类插件并将选项作为列表附加到其中。这是通过附加行返回此。$ element;

如果这是一个很好的解释，请告诉我。如果你能在这里加入我的教育，我将不胜感激。

    Plugin.prototype.formatString = function(key,val){
      this.$element = $(".plugin").append('<li><strong>' + key.toUpperCase() + ':</strong> ' + val + '</li>');
  return this.$element;
    }

JQuery动态加载div类

1 个答案: