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',
});

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

这里可以看到问题https://jsfiddle.net/xpvt214o/100340/

Answer 1

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

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

＆＃13;

;(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',
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

你还应该注意到这个插件是大量的过度杀伤，因为所有按钮实例的逻辑可以被提取到具有3行代码的单个事件处理程序。但是，我会假设这只是一个学习练习。

原型内的jQuery click事件扩展

1 个答案: