Question

I have these set of code from a helper:

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

    });

});

What it does is, between “li” items, click one to expand with the “width and height”, and click again to reset it back to default.

now I want to add another button inside the “li” to click on and load a div in another page. Unfortunately, every time I click that button, it acted like I just only clicked onto the “li” itself, so it just gave the effect, and the button won’t work even if I just want to click and get to another site. What can I do to make it clickable by itself.

Check on the Site please >>> SiteTest

Answer 1

The click on the button will bubble up to the li you need to call event.stopPropagation() if you want to prevent the li from expanding, or I think you could check and see if the element clicked was actually the li by checking event.target.

Halting event bubbling:

$('.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;

});

Checking the element:

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