div를 클릭하지만 자식 요소가 클릭에 반응하기를 원합니다.
문제
내 dom은 다음과 같습니다.
<div class="profile">
<a href="#"><img src="/img1.gif" /></a> <b>100</b>
<a href="#"><img src="/img2.gif" /></a>
</div>
좋아, 그래서 나는 내 페이지에 이러한 요소들 중 많은 부분이 있으므로 jQuery를 사용하면 다음과 같은 모든 이벤트를 바인딩합니다.
$(".profile").live('click', myCallback);
var myCallback = function(event) {
// ??
};
이제 누군가가 첫 번째 하이퍼 링크를 클릭하면 이미지를 "/img1_on.gif"로 변경 한 다음 Ajax를 웹 페이지로 호출하고 사이의 값을 바꾸고 싶습니다. 값이 반환 된 상태에서.
이미지가 "/img2_on.gif"로 변경되고 다른 URL로 이동하는 것을 제외하고는 다른 이미지를 클릭 할 때도 동일한 일이 발생합니다.
내가 변환하면 더 쉬울 것입니다 DIV에 CSS를 추가 하시겠습니까?
올바른 솔루션이 없습니다
다른 팁
$(".profile a").live("click", function(e) {
var temp = $("img", this);
var temp2 = temp.attr("src").split('.');
temp.attr("src", temp2[0] + "_on" + temp2[1]);
// Ajax goes here.
e.preventDefault();
});
당신은 div가 클릭 중이었고, div 내부의 링크가 아니라 그것을 가지고있었습니다. 이 기능은 AJAX 부분을 채우고 있다고 가정하면 작동해야합니다.
나는 당신이 요구하는 것을 완전히 확신하지 못하지만 클릭 이벤트를 일으킨 요소를 찾으려면 e.target을 사용할 수 있고 $ (e.target)을 사용할 수 있습니다. 이 같은.
$(".profile").live('click', function(e){
if($(e.target).is("a"))
$(e.target).find("img").attr("src","/new/url.jpg");
});
예를 들어, 하위 링크 만 선택하십시오 (이것 링크가 될 것입니다) :
$(".profile > a")
이미지 용 (이것 조작 할 이미지가 될 것입니다) :
$(".profile > a > img").live("click", function(event) {
var src = $(this).attr("src");
$(this).attr("src", src.replace(".gif", "_on.gif"));
// ajax call in any way you prefer
// in callback you can switch button state back
});
당신은 이것을 찾을 것입니다 게시하다 이벤트 순서가 무엇인지 정확히 설명하고 캡처 또는 버블 링 단계에서 이벤트를 듣고 추가 이벤트 전파를 취소 할시기를 설명합니다.
제휴하지 않습니다 StackOverflow