動態元素上的jQuery插件事件綁定

Question

我寫了一個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>

在其中我動態創建了一些元素（一個按鈕和一個div）並添加了一些事件綁定。 在示例代碼中，我有多個元素將分別使用此插件。 但是，當我觸發事件時，我注意到，綁定事件還將更改應用於我在插件中創建的最后一個div。

我在哪里做錯了？

Answer 1

您錯過了$div和$btn前面的var ，並且偶然創建了全局變量。