[자바 스크립트] 특정 클래스 이름으로 Div에 onclick을 추가하는 방법은 무엇입니까?

each()특정 클래스가있는 요소에 이벤트를 바인딩 할 필요가 없으며 선택 자만으로 충분합니다. 이벤트 위임과 함께 jQuery on () 을 사용 하면 바인딩 코드 이후에 생성 된 이벤트에 이벤트를 바인딩합니다.

$(document).on("click", ".fc-event-inner", function(){
     alert("click");
     });
     

위임 된 이벤트

위임 된 이벤트는 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수 ​​있다는 장점이 있습니다. 위임 된 이벤트 핸들러가 연결될 때 존재하도록 보장되는 요소를 선택하면 위임 된 이벤트를 사용하여 이벤트 핸들러 인 jQuery doc 을 자주 연결하고 제거 할 필요가 없습니다 .

-------------------

대리인 버전 사용 on

$(document).on("click", ".fc-event-inner", function(){
   /// do your stuff here
   });
   

이것은 문서 레벨에서 클릭을 포착 한 다음 클릭 한 항목이 관련성이 있는지 확인하기 위해 클래스 필터를 적용합니다.

예제 JSFiddle : http://jsfiddle.net/BkRJ2/

의견에 대한 답변 :

this이벤트 기능 내부 를 통해 클릭 한 요소에 액세스 할 수 있습니다 . 예 :

$(document).on("click", ".fc-event-inner", function(){
   var id = this.id;       // Get the DOM element id (if it has one)
      var $this = $(this);    // Convert DOM element into a jQuery object to do cool stuff
         $this.css({'background-color': 'red'});   // e.g. Turn clicked element red
         });
         

* 참고 : Each공통 클래스가있는 여러 항목에서 이벤트를 포착하기 위해를 실행할 필요가 없습니다 .

-------------------

<div class="fc-event-inner">
    <span class="fc-event-title">Requested<br />by Santa</span>
    </div>
    

당신의 JS :

<script>   
$(document).ready(function () {
  $('.fc-event-inner').on("click", EventClick);
  
    function EventClick() {
        alert("You clicked an event")
          }
          });
          </script>
          

http://jsfiddle.net/UBhk9/

몇 가지 설명 :

클래스를 사용하고 있기 때문에 (ID와 달리 여러 번 사용할 수 있음)이 클래스 이름을 가진 모든 요소에 대해 작동합니다. 이 .on메서드는 선택기 (클래스 .fc-event-inner)에 이벤트 핸들러 (이 예제에서는 "클릭")를 연결합니다 . 이벤트 경계를 제거하려면 .off()메서드 를 사용해야 하고 이벤트를 연결하려면 메서드 를 사용할 수있는 경우에만 사용해야합니다 .one().

출처
https://stackoverflow.com/questions/22009878