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的，尽管它这样做并没有坏处，但它是不必要的昂贵。