JQuery .parent click

Question

jquery에서 "this"및 ".parent()"를 사용하면 간단한 div 또는 datatables를 지나칠 때 약간 혼란스러워집니다. 나는 다음과 같은 구조의 테이블을 가지고 :

<table class="table1"> 
    <tbody> 
     <tr> 
      <div class="detail"> 
       <table> 
        <thead></thead> 
        <tbody> 
         <tr> 
          <td> 
           <img class="picture_open" src="../location"> 
</td></tr></tbody></table></div></tr></tbody></table> 

가 난 할 노력하고있어 것은 잡을 수있을 것이다 IMG에 클릭 기능을 가지고있다 (필자는 클래스 또는 ID의 이름을 바꿀 수 없습니다) 완전한 RowElement

내가 지금 무엇을 가지고 : 나는 위의이 코드가 출력합니다 그러나

이

$(".table1 tbody tr td img.picture_open").live('click', function() { 
    var overallTable = jQuery(this).parent("table").dataTable(); 
    console.log("overallTable: " + overallTable); 
    var elementRow = this.parentNode.parentNode; 
    console.log("elementRow: " + elementRow); 

    var rowData = overallTable.fnGetData(elementRow); 
    console.log("rowData: " + rowData); 
    if (this.src.match('img_name')) 
    { 
     //kills the table that was created if that row is opened 
    } 
    else 
    { 
     //runs ajax call to create another table since row is NOT opened 
    } 
}); 

: [개체 개체] elementRow : [객체 HTMLTableRowElement] 형식 오류 : '널 (null)'는 객체가 아닌 는 overallTable ('oSettings.aoData'평가)

내 문제는 $ (this)가 잘못 되었습니까? ("picture_open"클래스로 img를 가져 오지 못합니다) 또는 내 overallTable 변수가 .parent()로 잘못 설정 되었습니까? 또는 내 elementRow 변수가 parentNode로 잘못 설정 되었습니까? 내 오류를 명확히하는 데 도움이 될 것입니다.

감사합니다.

Answer 1

parent() jQuery를에를 찾기 위해 가장 가까운 테이블

Similary을 찾을 .closest('table')를 사용할 필요가 table

Answer 2

parent()의 jQuery는 DOM의 한 수준 만 이동하므로 아마도 여기에 parents('table')이 필요합니다. 이 경우 전체 테이블 문제가 해결됩니다.

Answer 3

in jQuery, .parent()은 DOM을 한 번 올라갑니다. 당신은 당신은 요소의 행

var elementRow = $(this).closest('tr'); 

Answer 4

을 찾을 때까지 DOM을보고 그것을 .parents()를 이용해야한다 무엇 DOM을 한 레벨 만 구문 분석하면 .parents()/.closest()을 사용해야합니다. 이렇게하면 문제가 해결됩니다.

참고 :.live()은 최신 jQuery 버전에서 .on()으로 바뀌 었습니다. 더 나은 .on()/.click()

Answer 5

을 사용하려면이 시도 :

$('.table1').on('click', '.picture_open', function(ev) { 
    this // is .picture_open element 
    ev.target // is .picture_open element 
    ev.delegateTarget // is .table1 element 

    var $row = $(ev.delegateTarget).find('.detail tr').first(); 
});