jQuery plugin event binding on dynamic element

Question

I have written a jQuery plugin which has similar functionality as following:

  <h1 id="t1">title 1</h1>
  <h1 id="t2">title 2</h2>
<script>
$.fn.extend({
  test: function(opts){
    var o = { text : 'hello '};
    o = $.extend( o, opts  );
    return this.each(function(){
      var $this = $(this);
      $div = $('<div/>');
      $btn  = $('<button />').text(o.text);
      $btn.click(function(){
        $div.text(o.text);
      });
      $this.after($btn).after($div);
    });
  }
});

$('#t1').test({text:'hola '});
$('#t2').test({text:'nihao '});
</script>

in which I have created some elements (a button and a div) on the fly and added some event bindings. In the sample code I have more than one element that will use this plugin respectively. However I noticed when I trigger the event, my bound event also applies changes to the last div I have created in the plugin.

Where have I done wrong?

TimWolla · Accepted Answer · 2014-03-18 03:00:05Z

1

You missed the var in front of your $div and $btn and created global variables by accident.

answered Mar 18, 2014 at 3:00

TimWolla

32.9k8 gold badges67 silver badges97 bronze badges

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

1 Comment

Stvyu Over a year ago

Cant believe I missed this... thanks alot! The code worked as intended after adding var!

Collectives™ on Stack Overflow

jQuery plugin event binding on dynamic element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related