Create Jquery Plugin with dynamic parameters for MULTIPLE usage

Question

I creating jquery plugin, looks like this :

(function ( $ ) {

    // -- This is Person Object used for plugin
    var PersonObject = function(elem, options)
    {
       this.elem = elem;
       this.options = options;
       this.run();
    };

    PersonObject.prototype = {

       run: function()
       {
          // console.log(this.options.person_name);
          self = this;
          tpl = '<a class="btn btn-link btncok">one</a>';

          self.elem.after(tpl);

            $('.content').on('click', '.btncok', function(e) {
                e.stopImmediatePropagation();
                self.show();
            });

          return self.options.person_name;
       },

       show: function()
       {
            console.log(this.options.person_name);
       }
    };
    // -- end Person Object



    // -- This is my jquery fn function
    $.fn.myPlugin = function(options) {

       // here is default options
       var default_options = {person_name: 'father'};

       options = $.extend({}, default_options, options);

       return this.each(function() {

          new PersonObject($(this), options);

       });
    };
    // -- end jquery plugin

}( jQuery ));

. .

so then, when the above plugin are used by many elements with different situation like this :

<div class="jumbotron content">
   <p class="something-one">one</p>
   <p class="something-two">two</p>
</div>

<script>
   // call the plugin WITH parameters
   $('.something-one').myPlugin({person_name: 'mother'});
   // result wrong : father (should be mother)

   // call the plugin WITHOUT parameters
   $('.something-two').myPlugin();
   // result correct : father
</script>

the parameters is not work expected.

all the element that using the plugin will receive same parameters by last element call

how to fix this problem :(

seems to be working fine jsbin.com/jafulo/edit?html,js,output unless i understood it wrong — Dhiraj
– Dhiraj, Commented Jun 15, 2015 at 0:01
@DhirajBodicherla thanks. you correct, I just updated my question. the parameters is not working for new(future) element. you can check my new question — antoniputra
– antoniputra, Commented Jun 15, 2015 at 0:20

Dhiraj · Accepted Answer · 2015-06-15 00:49:38Z

1

You are seeing the same value because of the below click handler

$('.content').on('click', '.btncok', function(e) {
  e.stopImmediatePropagation();
  self.show();
});

$('.content').on('click', '.btncok', .... is does not delegate event as expected. Instead attach an event to tpl directly. Something like this

this.appendedEl = $('<a class="btn btn-link btncok">'+this.options.person_name+'</a>');
this.elem.after(this.appendedEl);
this.appendedEl.on('click', function(e) { // <--- this way the event is attached to the right element
  e.stopImmediatePropagation();
  this.show();
}.bind(this)); // <--- I used bind instead of self

Here is a demo http://jsbin.com/jafulo/edit?js,output

edited Jun 15, 2015 at 0:49

answered Jun 15, 2015 at 0:37

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

antoniputra Over a year ago

awesome. so, what's exactly mean this code function(e) { e.stopImmediatePropagation(); this.show(); }.bind(this) you do chain(this) to the closure of click, can you explain to me ?

Dhiraj Over a year ago

bind(this); will make the outside this available inside the function. This will avoid using var self = this outside the function.

Collectives™ on Stack Overflow

Create Jquery Plugin with dynamic parameters for MULTIPLE usage

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related