jQuery插件：獲取事件僅觸發元素

Question

我試圖創建一個插件，但遇到了多個實例的問題。我希望代碼只針對正在使用的實例進行操作，但目前，如果我點擊一個，它就會對這兩個操作。我該如何編寫一個隻影響我正在與之交互的實例的插件？以下是我正在談論的一個精簡示例。

(function($) { 
    $.fn.cals = function(options) { 
    var containing_element = this; 


     var opts = $.extend({}, options); 

     // create a container after each element 
     $(containing_element).after('<div class="container">Click</div>'); 

     return this.each(function() { 
      $('.container').on('click', function() { 
        console.log('test') 
      }) 
     }); // END this.each 
    }; 
})(jQuery); 

的HTML代碼是：

<script> 
    $(document).ready(function() { 
     $('.test').cals(); 
    }); 
</script> 

    <div class="test" type="text"> 
    <div class="test" type="text"> 

</html> 

的代碼插入<div class="container>Click</div>.test兩者的div下方。當我點擊一個，console.log('test')吐出2「測試」。我只想讓代碼在我正在與之交互的實例上進行操作。

Answer 1

我建議修改你的插件語法在each()環（元素的一個克隆先前定義在這種情況下）追加新要素：

(function ($) { 
    $.fn.cals = function (options) { 
     var containing_element = this; 
     var opts = $.extend({}, options); 

     // create containing element for calendar 
     var container = $('<div />', { 
      'class' : 'container', 
      'text' : 'click', 
      'click' : function(){ 
       console.log('test'); 
      } 
     }); 

     return this.each(function() { 
      $(this).after(container.clone(true, true)); 
     }); // END this.each 
    }; 
})(jQuery); 

JS Fiddle demo。

順便提及，containing_element是已經 jQuery對象（如功能的範圍內的this，儘管不的each()內），它並不需要被重新裹在jQuery的，儘管它這樣做並沒有壞處，但它是不必要的昂貴。