div를 클릭하지만 자식 요소가 클릭에 반응하기를 원합니다.

Question

내 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를 추가 하시겠습니까?

Answer 1

$(".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 부분을 채우고 있다고 가정하면 작동해야합니다.

Answer 2

나는 당신이 요구하는 것을 완전히 확신하지 못하지만 클릭 이벤트를 일으킨 요소를 찾으려면 e.target을 사용할 수 있고 $ (e.target)을 사용할 수 있습니다. 이 같은.

$(".profile").live('click', function(e){
  if($(e.target).is("a"))
     $(e.target).find("img").attr("src","/new/url.jpg");
});

Answer 3

예를 들어, 하위 링크 만 선택하십시오 (이것 링크가 될 것입니다) :

$(".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
});

Answer 4

당신은 이것을 찾을 것입니다 게시하다 이벤트 순서가 무엇인지 정확히 설명하고 캡처 또는 버블 링 단계에서 이벤트를 듣고 추가 이벤트 전파를 취소 할시기를 설명합니다.