Jquery .Click 이벤트는 루프의 첫 번째 버튼 만 트리거

Jquery .click 이벤트는 첫 번째 버튼 만 트리거합니다! 데이터를 반복하고 각 HTML 페이지에 버튼을 추가하고 클릭 할 때 각 버튼이 대화 상자를 트리거하는 것을 원합니다. 그러나 첫 번째 버튼 만 작동합니다! 나머지는 클릭 이벤트가없는 것 같습니다.Jquery .Click 이벤트는 루프의 첫 번째 버튼 만 트리거

$(document).ready(function() { 

$("#btn_comment").click(function() { 

    $("#createComment").dialog(
          { 
           modal: true, 
           height: 300, 
           width: 500, 
           buttons: { 
            "Create a Comment": function() { 
            var post_id = $(this).parent().attr("id"); 
            var desc_to_create = $("#txtComment").val(); 
            $.post("CreateComment", { "id": "", "username": "x", "post_id": post_id, "description": desc_to_create, "created": "" }, function (t) { 

              alert("Thank you! Your comment has been updated!!"); 
              location.reload(); 

             }) 


            }, 
            "Cancel": function() { 
             $(this).dialog("close"); 
            } 
           } 
          } 
          ); 
}) 

})

<tr id='<%= Html.Encode(item.id) %>'> 
     <td> 

      <%: Html.ActionLink("Details", "Details", New With {.id = item.id})%> | 
       <a href="javascript://" class="delete_btn">Delete</a> 

     </td> 
     <%-- <td> 
      <%: item.id %> 
     </td> 
     <td> 
      <%: item.username %> 
     </td> 
     <td> 
      <%: item.title %> 
     </td>--%> 
     <td> 
      <%: item.description %> 
     </td> 
     <td> 
      <input id="btn_comment" type="button" value="Add a Comment" /> 
     </td> 
     <td> 
      <div id="new_comment"></div></td> 
    </tr> 

<% Next%>

출처

2012-05-14 Queen13

ID가 btn_comment 인 페이지에 버튼이 두 개 이상 있습니까? ID는 고유해야합니다. – j08691

@ j08691 네 말이 맞아. 하나 이상의 클래스가있는 경우 클래스를 사용해야합니다. – Norse

귀하의 HTML 마크 업이 잘못되었습니다. 당신은 루프에서이 있습니다 id 값이 독특한을하는 것이

<input id="btn_comment" type="button" value="Add a Comment" />

그러나, HTML이 필요합니다. 정의되지 않았기 때문에 사용자가보고있는 동작 (첫 번째 일치하는 요소 만 찾는 jQuery)은 브라우저와 관련이 있다고 상상해보십시오.

요소가 고유하지 않은 경우이 문제를 해결하는 가장 빠른 방법은 id 대신 class을 사용하는 것입니다. 이런 식으로 뭔가 :

<input class="btn_comment" type="button" value="Add a Comment" />

그런 다음 당신의 jQuery 셀렉터는 다음과 같습니다

$('.btn_comment')

이 모든 일치하는 요소를 선택합니다.

당연히 여기에는 해당 항목이 id이 아닌 것으로 가정합니다. (마크 업이 유효하지 않으므로 어쨌든 논리를 다시 작성하려고합니다.)

출처

2012-05-14 00:44:06 David

Jquery .Click 이벤트는 루프의 첫 번째 버튼 만 트리거

답변

관련 문제