자바 스크립트 클릭 이벤트가 WebGrid MVC의 첫 번째 요소에서만 작동합니다.

Question

페이지로드시 채워지는 webgrid가 있습니다. 이 표에는 클릭 할 때 처리되는 javascript 이벤트가있는 요소가 있습니다. 여기에서는 단순히 사용자를 외부 사이트로 보냅니다. 나는 이것을 컨트롤러에 묶어 두었다. 두 요소 모두 첫 번째 요소에서 작동합니다. 그러나, 목록의 첫 번째 요소 다음에 오는 경우 javascript가 호출되지 않습니다.

WebGrid :

@grid.GetHtml(tableStyle: "table table-striped table-bordered", 
      headerStyle: "thead-default", 
      columns: grid.Columns(
       grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) => 
        new HtmlString(Html.CheckBox("post_tran_a", (bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" }) 
        + " " + 
        Html.ActionLink((string)item.post_tran_a.month, "PostTransmission", Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link }, new { @id = "external-link", data_url=Url.Action() }) 
        )))) 

자바 스크립트 :

$("#external-link").click(function() { 
    var url = $("#external-link").attr("data-url"); 
    alert(url); 
}); 

이 방법은 내가 다른 솔루션에 열려있어 작동하지 않을 경우

.

Answer 1

특정 경우에

간단한 방법은

$("table a").click(function() {  
    // you need here 'this' it is available by default 
    // and it points to the object on which click is called 
    var url = $(this).attr("data-url"); 
    alert(url); 
}); 

처럼 작동 할 수 있습니다 귀하의 JQuery와 선택기에서 다른 선택기를 사용할 수 있습니다

하지만 위가 너무 일반적입니다. 다른 링크가있는 테이블을 가지고있는 경우 실패합니다.

Id는 하나의 요소에 대해서만 작동합니다. 일련의 요소 (예 : 여러 링크)의 경우 클래스를 사용하고 클래스별로 액세스해야합니다.

나는 당신의 아이디를 class로 바꿨고 그 이름으로 액세스했다. 당신이 다음 수준의 속성을 추가 할 의향이없는 경우

grid.GetHtml(tableStyle: "table table-striped table-bordered", 
      headerStyle: "thead-default", 
      columns: grid.Columns(
grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) => 
    new HtmlString(Html.CheckBox("post_tran_a", 
(bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" }) 
        + " " + 
Html.ActionLink((string)item.post_tran_a.month, "PostTransmission", 
Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link }, 

// See following carefully 
new { @class="someuniquecalssname" data_url=Url.Action() }))))) 

지금 자바 스크립트가 전 링크 1과 같은 고유 ID를 생성,

$(".someuniquecalssname").click(function() { 
    var url = $(this).attr("data-url"); 
    alert(url); 
}); 

잘 작동, 전 링크 2는 많은 경우에 가능할 수 있습니다. 하지만 위와 같은 이벤트에는 쓸모가 없습니다

Answer 2

id를 사용하여 요소를 선택하면 ID는 페이지에서 고유해야합니다. 당신의 코드에서 설정시 클래스 또는 고유 ID를 사용할 @id = "external-link--xxx"

또한

$("#yourtableid a").click(function() { 
    var url = $("#external-link").attr("data-url"); 
    alert(url); 
});