Javascript 动态元素上的jQuery插件事件绑定

我已经编写了一个jQuery插件，它具有以下类似的功能：

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

标题1
标题2
$.fn.extend({
测试：功能（opts）{
var o={text:'hello'}；
o=$.extend（o，opts）；
返回此值。每个（函数（）{
var$this=$（this）；
$div=$（''）；
$btn=$（''）.text（o.text）；
$btn.单击（函数（）{
$div.text（o.text）；
});
$this.after（$btn）.after（$div）；
});
}
});
$（'#t1'）。测试（{text:'hola'}）；
$（'#t2'）。测试（{文本：'nihao'}）；

在其中，我动态创建了一些元素（一个按钮和一个div），并添加了一些事件绑定。在示例代码中，我有多个元素将分别使用此插件。然而，我注意到，当我触发事件时，我的绑定事件也会将更改应用到我在插件中创建的最后一个div

---

我哪里做错了？

你错过了你的

$div

和

$btn

前面的

var

，意外地创建了全局变量。

真不敢相信我错过了这个。。。非常感谢！添加var后，代码按预期工作！