javascript - 原型(prototype)扩展中的 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',
});

但是，每次我点击其中一个标签时，似乎另一个标签也在运行。

这里fiddle看issue https://jsfiddle.net/xpvt214o/100340/

Answer 1

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

也就是说，您根本不需要委托(delegate)的事件处理程序。您也不需要 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 行代码提炼到单个事件处理程序中。但是，我假设这只是一个学习练习。