2012-10-01 3 views
0

다음 코드를 실행하면 a 요소가 div 요소 안에 있기 때문에 예상대로 1을 얻습니다.요소 클릭 및 문서 계층 구조 클릭

는 HTML :

<div class=".holder"> 
    <a href="#" class=".link">a</a> 
</div> 

jQuery를 :

$(document).click(function (e) { 
    alert($(e.target).closest(".holder").length); 
}); 

자, 요소 내부는 그래서 a 요소 자체를 포함하여, div 요소를 다시 채울 필요가 :

$(".link").on("click", function (e) { 
    e.preventDefault(); 
    $(".holder").html("some html"); 
}); 

문제는 다음과 같습니다. ae를 클릭하면 a 요소가 클릭 된 후 문서 클릭이 발생하기 때문에 (의미 있음, 계층 구조) 요소 부모가 더 이상 존재하지 않으며 a 요소 자체는 메모리에만 있기 때문에 1 대신 0이됩니다.

요소를 직접 확인하지 않고이 문제를 해결할 방법이 있습니까? 당신은 당신은 문서의 클릭 이벤트를 만들 수 있습니다

$(document).click(function (e) { 
    if(e.target.className === 'link'){ 
     e.preventDefault(); 
     alert($(e.target).closest(".holder").length); 
     $(".holder").html("some html"); 
    } 
}); 

이 방법을 시도하고 무엇 현재 대상을 확인할 수 있습니다

$(document).click(function (e) { 
    alert($(e.target).closest(".holder").length); 
    if($('.holder').data('executeMe')) 
    $('.holder').data('executeMe')(); 
}); 

$(".link").on("click", function (e) { 
    e.preventDefault(); 
    $('.holder').data('executeMe', function() { 
     $(".holder").html("some html"); 
    }); 
}); 

+0

? 당신은'$ (e.target) .closest (".holder"). 길이를 알려주고 1을 경고하고 싶습니까? –

+0

정확히 무엇이 문제입니까 ?? –

답변

1

당신은 HTML 교체를 연기 할 수있다 그렇다면 ... 그 링크를 누른 다음 코드를 작성하여 원하는 것을 처리하십시오 ..

도트 도 제거하십시오. 당신의 클래스 이름에클래스 = "링크"

CHECK DEMO

정확히 당신이 달성하려고하는 무엇
2

: