Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="jumbotron content">
      <p class="something-one">one</p>
      <p class="something-two">two</p>
    </div>
  </body>
</html>
 
(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() {
      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)); 
      return this;
    },
    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 ));
$('.something-one').myPlugin({person_name: 'mother'});
// result wrong : father (should be mother)
// call the plugin WITHOUT parameters
$('.something-two').myPlugin();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dhirajbodicherlapro
0viewers