創建具有動態參數的jQuery插件以多次使用

Question

我創建了jQuery插件，看起來像這樣：

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

。 。

因此，當上述插件被具有不同情況的許多元素使用時，如下所示：

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

參數無法正常工作。

使用該插件的所有元素將在上一次元素調用時收到相同的參數

如何解決這個問題:(

Answer 1

由於以下點擊處理程序，您看到的值相同

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

$('.content').on('click', '.btncok', .... is不能按預期委派事件，而是將事件直接附加到tpl 。類似這樣

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

這是一個演示http://jsbin.com/jafulo/edit?js，輸出