Jquery 클릭 수 없음 DOM 요소

Question

특정 범위 요소를 클릭하면 클릭 이벤트가 발생합니다. 다음

$("th > span").click(function() { 
     alert('hi'); 
}); 

이 작동하지 않습니다 :

다음 작품 : 스팬 요소는 실제로 테이블의 상단에있는 버튼입니다

$("th.sorting > span").click(function() { 
     alert('hi'); 
}); 

의 일 요소가 변경의 클래스 sorting_asc 또는 sorting_desc로 정렬하고 어떤 버튼 유형을 클릭했는지에 따라 특정 이벤트를 트리거하고 싶습니다.

업데이트 : 소스를 볼 때

흥미롭게 나는 다음과 같은 경우에만 참조 :

<th><span class = 'btn' style = 'width:90%'>Image<span id='i'></span></span></th> 

...하지만 내가 불을 지르고 통해 '요소 검사'때 참조 :

<th class="sorting" role="columnheader" tabindex="0" aria-controls="dispensers" rowspan="1" colspan="1" style="width: 187px; " aria-label="Image: activate to sort column ascending"><span class="btn" style="width:90%">Image<span id="i"></span></span></th> 

나는 이것이 나의 문제의 근원이 아니라고 생각한다. 나는 Jquery가 후자의 요소 코드를 알고 있다고 가정하고있다.

는 ('datatables를'플러그인 JQuery와 업데이트 된 코드에 대한 책임)

UPDATE :

최종 코드 :

$('th').on('click', '.sorting > span', function() { 
     $("span#i").html(''); 
    jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>'); 
    }); 

$('th').on('click', '.sorting_asc > span', function() { 
     $("span#i").html(''); 
    jQuery("span#i", this).html(' <i class=\"icon-chevron-down\"></i>'); 
    }); 

$('th').on('click', '.sorting_desc > span', function() { 
     $("span#i").html(''); 
    jQuery("span#i", this).html(' <i class=\"icon-chevron-up\"></i>'); 
    }); 

외관 :

Answer 1

$('th').on('click', '.sorting > span', function() 
{ 
    alert('hi'); 
}); 

$.on 덕분에 요소를 이벤트 처리기에 바인딩 할 수 있습니다. 바인딩 처리기의 두 번째 부분 인 jQuery가 해당 항목을 추적하는지 확인합니다.

Answer 2

다음 synatx에 코드를 수정 :

$("th.sorting span").click(function() { 
    alert('hi'); 
}); 

를 적어 둡니다을의 누락 된 '>'귀하의 질문에 대신 단지 공간으로.

Answer 3

질문을 올바르게 이해하고 있다면 해당 클래스의 클래스에 따라 오름차순 정렬 또는 내림차순 정렬을 수행해야하는지 식별해야합니다. 그게 맞다면 다음과 같이 시도해보십시오 (테스트하지 않았습니다!) :

$("th > span").click(function() { 
    var th = $(this).parent("th"); 
    if($(th).hasClass("sorting")) { 
     //do something 
    } elseif($(th).hasClass("sorting_asc")) { 
     // Sort ascending 
     $(th).removeClass("sorting_asc"); 
     $(th).addClass("sorting_desc"); 
    } elseif($(th).hasClass("sorting_desc")) { 
     // Sort descednding 
     $(th).removeClass("sorting_desc"); 
     $(th).addClass("sorting_asc"); 
    } 
});