原型扩展中的jQuery点击事件

Question

我有这个代码

;(function($, document, window) {
    'use strict';
    var defaults = {
        el: '.na', 
    };
    $.fn.baboy = function( options ) {
        var settings = $.extend( {}, defaults, options );
     this.each(function(){       
        var dis = $(this);
      $('body').on('click', dis, function(e) {
        var text = dis.text();
        $( settings.el ).append('Click ' +  text + '</br>' );
      });
    });  
    };
})(jQuery, document, window);

然后我想在两个元素上使用它

<a href="#" class="btn">Button 1</a>
<p class="duh"></p>
<a href="#" class="btn2">Button 2</a>
<p class="duh2"></p>

在两个元素中使用该函数

$('.btn').baboy({
    el: '.duh',
});
$('.btn2').baboy({
    el: '.duh2',
});

但是，每次我单击任何 a 标签时，似乎另一个标签也会运行。

在这里，小提琴看到的问题 https://jsfiddle.net/xpvt214o/100340/

Answer 1

问题是因为你在委托on()调用的选择器参数中使用了 jQuery 对象。为什么这会影响所有元素而不是绑定元素，如果不深入研究 jQuery 源代码，我不确定。但是我可以说您的用法不正确;该参数应为字符串。

也就是说，您根本不需要委托的事件处理程序。你也不需要each()。您可以在实例化插件的元素上创建 click() 事件处理程序，如下所示：

;(function($, document, window) {
  'use strict';
  var defaults = {
    el: '.na',
  };
  
  $.fn.baboy = function(options) {
    var settings = $.extend({}, defaults, options);
    return this.on('click', function() {
      $(settings.el).append('Click ' + $(this).text() + '</br>');
    });
  };
})(jQuery, document, window);
$('.btn').baboy({
  el: '.duh',
});
$('.btn2').baboy({
  el: '.duh2',
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}
a {
  display: inline-block;
  background: #a3de14;
  padding: 10px 30px;
  font-size: 12px;
  text-decoration: none;
}
.duh,
.duh2 {
  background: #fff;
  padding: 10px 20px;
  color: #222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="btn">Button 1</a>
<p class="duh"></p>
<a href="#" class="btn2">Button 2</a>
<p class="duh2"></p>

您还应该注意，这个插件是巨大的矫枉过正，因为所有按钮实例的逻辑都可以提炼成具有 3 行代码的单个事件处理程序。但是，我假设这只是一个学习练习。