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> 

코드는 모두 .test div의 아래 <div class="container>Click</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합니다. 그것은 jQuery를 재 래핑 할 필요가 없었다합니다 (each() 내의 하지이라도 함수의 범위 내에서 this 같이)

또한, containing_element는 이미 JQuery와 오브젝트 인 것이 있지만 그렇게해도 해가되지는 않지만, 불필요하게 비싸다.