jQuery click event inside prototype extend

Question

I have this code

;(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);

Then I wanted to use it on two elements

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

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

using the function in two elements

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

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

However, everytime I click any of the a tag, it seems like the other one also runs.

Here the fiddle to see the issue https://jsfiddle.net/xpvt214o/100340/

$('body').on('click', dis, function(e) { looks weird. The second argument to on() there should be a selector, but you are giving it a jQuery object. I'm not even sure why you are doing a delegate there. You already have the object you are trying to process events on. — Taplar
– Taplar, Commented Apr 11, 2018 at 16:07

Rory McCrossan · Accepted Answer · 2018-04-11 16:09:54Z

The issue is because you're using a jQuery object in the selector argument of the delegated on() call. Quite why this then affects all elements not the bound one I'm not sure without digging in to the jQuery source. However I can say that your usage is incorrect; that argument should be a string.

That said, you don't need a delegated event handler at all. You don't need the each() either. You can create the click() event handler on the element(s) the plugin was instantiated on, like this:

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

You should also note that this plugin is massive overkill, as the logic for all button instances can be distilled in to a single event handler with 3 lines of code. However I'm going to assume this is just a learning exercise.

Collectives™ on Stack Overflow

jQuery click event inside prototype extend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related