JQuery와 - 중첩 된 태그를 추가

Question

내가 도우미에서 이러한 코드 설정 :

$(document).ready(function(expanded) { 
    var listItems = $('li.playerContainer'); 
    listItems.data("collapsed", true); 
    $(listItems).click(function() { 
     reset(this); 
     var collapsed = $(this).data("collapsed"); 
     if (collapsed) { 
      $(this).stop(true, true).animate({ 
       width: "450px", 
       height: "500px" 
      }).data("collapsed", false); 
      $(this).children(".playerInfoR").addClass("rightAppear"); 
      $(this).children(".player_nameR").css({visibility:"hidden"}); 
      $(this).children(".closeR").addClass("rightAppear"); 
      $(this).children(".playerAchievesR").addClass("rightAppear"); 
     } else { 
      $(this).stop(true, true).animate({ 
       width: "210px", 
       height: "100px" 
      }).data("collapsed", true); 
      $(this).children(".playerInfoR").removeClass("rightAppear"); 
      $(this).children(".player_nameR").css({visibility:"visible"}); 
      $(this).children(".closeR").removeClass("rightAppear"); 
      $(this).children(".playerAchievesR").removeClass("rightAppear"); 
     }; 

     return false; 
    }); 

    function reset(clicked) { 
     $(listItems).not(clicked).stop(true, true).animate({ 
      width: "210px", 
      height: "100px" 
     }).data("collapsed", true); 
     $(".playerInfoR").removeClass("rightAppear"); 
     $(".player_nameR").css({visibility:"visible"}); 
     $(".closeR").removeClass("rightAppear"); 
     $(".playerAchievesR").removeClass("rightAppear"); 
     return false; 
    }; 

    $(".events").click(function(){ 

     $("events").load("http://www.yahoo.com"); 

    }); 

}); 

은 "리"항목 사이이며, 무엇을,의 "폭과 높이"로 확장 하나를 클릭하고 다시 기본값으로 다시 설정하려면 다시 클릭하십시오.

이제 "li"안에 다른 버튼을 추가하여 다른 페이지에서 div를 클릭하고 싶습니다. 불행히도, 그 버튼을 누를 때마다, 단지 "리"그 자체를 클릭 한 것처럼 행동했습니다, 그래서 그것은 효과를 주었고, 버튼을 클릭하고 다른 사이트로 가고 싶어도 버튼이 작동하지 않습니다. 클릭만으로 할 수있게하려면 어떻게해야합니까?

사이트 제발

확인 >>>SiteTest

Answer 1

버튼 의지 거품에 클릭 최대에 li 당신이 확장에서 리튬을 방지하려면 event.stopPropagation()를 호출 할 필요가, 또는 당신이 확인할 수 있다고 생각하고 event.target을 클릭하여 클릭 한 요소가 실제로 li인지 확인합니다.

앞뒤가 맞지 이벤트 버블 링 :

$('.events').click(function(e){ 
    e.stopPropagation(); 
    // if you are using <a> tags for this you probably also 
    // want to do e.preventDefault(); 

    $("#events").load("http://www.yahoo.com"); 
    return false; 

}); 

요소 확인 :

$(listItems).click(function(e) { 
    if($(e.target).is(this)){ 
    // do your normal expand collapse stuff 
    } 
    return false; 
}); 

Answer 2

을 당신이 클릭 이벤트에 이벤트 핸들러를 추가 이런 일을 할 수있는 것보다 정확하게 당신을 얻을 경우에, 버블 링에서 이벤트를 중지합니다.

$('li.playerContainer #mybutton').click(function(event) { 
    // do your stuff/loading page etc. 

    // stop event from bubbling, so that your default li-handling will not take place 
    event.stopPropagation(); 
}