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', ....不会按预期委托事件。而是直接将事件附加到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,output

使用MULTIPLE使用的动态参数创建Jquery插件

1 个答案: