2016-11-15 4 views
0

다음 question에 대한 답변, 캘린더에 대해 동적으로 생성 된 요소에 대한 jQuery 클릭 이벤트?

var counter = 0; 
$("button").click(function() { 
$("h2").append("<p class='test'>click me " + (++counter) + "</p>") 
}); 

$("h2").on("click", "p.test", function(){ 
alert($(this).text()); 
}); 

내가 대신 새로운 웹 페이지를 여는, 개인 일을 클릭하면, 하루 중 이벤트의 일정을 스왑하는 동적으로 생성 된 일정이있다. 이벤트는 테이블에 나열되어 있고 행을 클릭하여 location.assign()을 사용하는 함수를 트리거 할 수있게하려고합니다. 그래서 각 행은

<tr id="message-132"> 

클릭하면이 기능을 실행하지 않는, 일정 하중에 다음과 같은

<tr id="message-7"> 

새로운 페이지를보고 만듭니다. 다른 질문의 예제에서, 그것은 내 상황에서와 같이 요소에 고유 한 ID를 부여하는 것과는 반대로 요소를 고유하게 만들기 위해 요소의 텍스트에 액세스합니다.

내가 잘못 접근하고 있습니까? 참조 할 수있는 "title=132" 태그와 같은 것을 추가 할 수 있습니까?

+0

click 이벤트를 구현하는'.message' 클래스 (또는 어떤 클래스)라도 사용할 수있는 것처럼 보이고, 이벤트 함수에서'$ (event.target)'을 사용하여 보낸 사람을 얻지 만 모르겠다. 내가 정확히 당신의 질문을 이해한다면 –

답변

1

ID에서 너무 많은 의미를 부여하지 않는 것이 좋습니다. 대신 데이터를 shown here으로 사용하십시오.

그래서 대신

<tr id="message-7"> 

사용

<tr id="1234567" data-message="7"> 

그런 다음 코드에서이 같은 데이터를 처리 할 수 ​​있습니다 : 당신이 다음 일반적인 클릭 이벤트를 추가해야하는 경우

var messageVal = $("#1234567").data("message") 

그리고 적절한 모든 TR에 대해 더미 CSS 클래스 할당을 사용하는 것이 좋습니다.

<tr id="1234567" data-message="7" class="messageRow"> 

당신이

$(".messageRow").on("click", function(event){ 
    event.preventDefault() 
    var messageVal = $(this).data("message") 

이 일부 TR의 클릭 가능한 내용을 포함 할 경우에 유용을 쓸 수 있도록 - 단지 다른 사람에게 클래스를 지정하지 않습니다.

+0

고맙습니다. 정확히 제가 찾고 있던 것이죠. – Mike

관련 문제