동적으로 생성 된 버튼을 클릭하십시오.

Question

MVC를 사용하고 있으며 뷰에서 For 루프를 사용하여 동적으로 컨텐트를 생성하고 있습니다. 각 루프 내에서 "주석보기"버튼을 삽입합니다.

첫 번째 '댓글보기'버튼을 클릭하면 첫 번째 블록의 데이터와 관련이있는 코드 (예 : 요리 세제 정보)를 실행하려면 어떻게해야합니까? 예 : 버튼이 동적으로 생성되었으므로 해당 데이터 행의 모델에서 ID를 가져 오는 방법은 무엇입니까?

아래 jQuery 코드를 사용하고 싶습니다. 하지만 특정 행의 ID를 잡는 방법을 알지 못합니다.

$("#seeComments").click(function() { 
     alert(ID); 
    }); 

Answer 1

각 항목에 html을 생성 할 때 표시하지 않는 값이 포함 된 버튼에 데이터 속성을 추가하여 click 이벤트에서 검색 할 수 있도록하십시오. ID가 아닌 버튼의 클래스 이름을 사용하십시오. 잘못된 html 인 중복 ID가 있으므로 유의하십시오. 예를

@for(int i = 0; i < Model.Count; i++) 
{ 
    <div class="answer"> // wrapper to allow selection 
    <div class="heading"> 
     <span class="name">@Model[i].Name</span> 
     <span class="rating">@Model[i].Rating</span> 
    </div> 
    ..... 
    <button class="comments" type=button" data-id="@Model[i].ID">See Comments</button> 
    .....  
    </div> 
} 

및

$('.comments').click(function() { 
    var id = $(this).data('id'); 
    var rating = $(this).closest('.answer').find('.rating').text(); 
    .... 
} 

Answer 2

당신은 버튼의 data-id 속성에 관련 행의 ID를 넣고 버튼의 class로 seeComments을 설정할 수 있습니다. 당신은 당신의 모델 클래스라는 이름의 중첩 된 IEnumerable 속성이 포함 된 경우 뷰 코드는이

@foreach (var answer in Model) 
{ 
    ..... 


    <button type="button" data-id="@answer.ID" class="seeComments">See comments</button> 
} 

처럼 이하와 같은 것, 그래서는 IEnumerable의 가정, 당신의 모델 클래스 정의를 포함하지 않았다 Answers

@foreach (var answer in Model.Answers) 
{ 
    ..... 


    <button type="button" data-id="@answer.ID" class="seeComments">See comments</button> 
} 

는 .seeComments 선택기를 사용하여 모든 See Comments 버튼의 클릭 이벤트를 바인딩 아래

$(".seeComments").click(function() { 
    // this will display the data-id value of the clicked button 
    alert($(this).data("id")); 
}); 

같은 ID를 잡아 .data("id")를 사용