바인딩 고유의 클릭 이벤트 확인

Question

나는이 리피터 그래서 :

 <asp:Repeater runat="server" ID="rep" > 
     <ItemTemplate> 
     <tr> 
     <td>   
     <div id="resultDiv"> 
     click me 
     </div>      
     </td> 
     </tr>    
     </ItemTemplate> 
     </asp:Repeater> 

을 그리고 난이 JQuery와 아약스 호출이 있습니다

$(document).ready(function() { 
      $("#resultDiv").click(function() { 
       $.ajax({ 
        type: "POST", 
        url: "Page.aspx/GetDate", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (msg) { 
         // Replace the div's content with the page method's return. 
         $("#resultDiv").text(msg.d); 
        } 
       }); 
      }); 
     }); 

문제가 있다는 것입니다을 이는 리피터 내부의 첫 번째 div에서만 작동합니다. 다른 div를 클릭하면 click 이벤트가 발생하지 않습니다. 나는 모두 "id"가 같기 때문에 이것이 "resultDiv"라는 것을 알고 있습니다.

내가 지금은 이런 식으로 할 수있는 일입니다 그들에게 고유 ID의를 제공하는 방법을 찾고 있어요 : (리피터 ItemTemplate을 내부)

<td>   
<div id="resultDiv_<%#Eval("divId") %>"> 
click me 
</div>   

이 중계기 고유 ID 안에 모든 div의를 제공합니다 하지만,이 방법 아약스 클릭 이벤트 나던 화재가 더 이상

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

resultDiv 때문에 지금 resultDiv_1 또는 resultDiv_2 같은 것입니다.

그래서 저는 리피터 내부의 각 div에 클릭 이벤트를 바인딩 할 무언가를 찾고 있습니다. 나는 아약스 전화에서 이런 식으로 시도했다.

$("#<%#Eval("divId") %>").click(function() 

그러나 이것은 작동하지 않고 모든 종류의 오류를 준다.

내가 할 수있는 방법이 있습니까? 제발 나는 업데이트 패널을 사용하고 싶지 않습니다. 당신은 라이브 이벤트 핸들러가 필요한 경우

Answer 1

, 당신은 on 사용해야합니다

$("body").on('click', '#resultDiv', function(e) { }); 

당신이 (resultDiv_1 또는 resultDiv_2를 사용하여) 모든 #resultDiv 같은 방법으로 처리하는 경우 사용할 수 있습니다

$("body").on('click', 'div[id^=resultDiv]', function(e) { }); 

고유하지 않기 때문에 ID 대신 클래스를 사용할 수 있습니다. addClass 또는 removeClass을 사용하여 쉽게 재생할 수 있습니다! 귀하의 경우에는

, 나는 각 사업부에 같은 클래스를 추가하고 (다른 작업을 호출합니다 각을 가질 필요가있는 경우) 일부 데이터 ATTR에 매개 변수를 전달 :

<div id="resultDiv" class="result" data-some-var="some-param"> 
    click me 
</div> 

을 그리고

$("body").on('click', '.result', function(e) { 
    var param = $(this).attr('data-some-var'); 
    //send or do something different according to the param 
});