2013-04-06 6 views
1

datatables.net을 사용하여 아약스를 통해 데이터가로드 된 테이블이 있습니다. 사용자가 행을 클릭 할 때 해당 행의 기본 키의 get 변수가 추가 된 URL로 연결되도록 만들 싶습니다.Datatables 행을 클릭 할 수있게 만들기

오히려 Datatables에 익숙하지 않으므로 해킹 시도/아이디어는 Datatables를 사용하여 기본 키가있는 두 개의 클래스 2 개를 적용하는 것이 었습니다. 두 클래스는 hide (css of display : none) 및 projectID (jquery로 값을 얻을 수 있도록 해당 열을 식별 함)입니다. aoColumns 속성을 사용하여 이러한 클래스를 적용 할 수 있었고 열을 숨기고 projectID 클래스도 추가했습니다. 그러나 나는 내가 또한 아무 소용

$('#project-table tr').live('click',function(){alert('clicked');})}; 

을 시도 Datatables이

$('#project-table tr').click(function(){alert('clicked');} 

를 사용에서 저를 방지 년대 테이블을 생성하기 때문에 생각합니다.

내가 행을 클릭 할 수 있도록하는 것보다 더 나은 방법이 있다고 가정합니다. 기본 키가 추가 된 페이지에 연결하는 것은 변수를 가져 오지만 예제를 찾을 수 없습니다. 누구든지 예제에 대한 링크가 있거나 올바른 방향으로 나를 가리킬 수 있다면 그것은 높이 평가 될 것입니다.

답변

5

나는 경우가 아니면 페이지를로드하는 동안 요소에 바인딩 된 모든 이벤트 핸들러가로드 된 데이터에 적용 할 수 없음을 의미합니다 datatables.net

를 사용 아약스를 통해 데이터가로드되는 테이블이 정적 부모 요소에 위임 됨 - 요소가 절대 제거되거나 대체되지 않으며 무기한으로 존재 함을 의미합니다.

$(document).on('click', '#project-table tr', function(){ 
    alert('This is a click on a dynamic element'); 
}); 

여기에서 클릭 이벤트는 document으로 제한됩니다. 선택한 경우 가까이에있는 요소 (성능 향상을 위해)를 선택할 수 있습니다. 사이드 참고로

Here is the link to the documentation for .on()

- jQuery를 1.9에서 +는 몇몇 기능들은 제거되었다. 그 중 하나는 .on() 메서드로 바뀐 .live() 함수입니다 (위 그림 참조). 이것이 작동하지 않는 이유입니다. 또한 console이이를 알려줍니다. 현재 많은 브라우저가 자체적으로 web inspector과 함께 제공됩니다. 그렇지 않으면 브라우저에 대한 Google 검색을 수행하고 대안을 찾을 수 있습니다.

관련 문제