Question

I am designing an email system similar to Gmail, and when the user clicks on a message, it brings him to the page for that message. The user can also click on a checkbox on the left hand side of this link, and also a button to star/unstar the message. I do not want clicking on the checkbox or the star icon to bring the user to the message.

How can I do this? I tried using the jQuery not() function to exclude these, but A) It does not seem to be working for multiple selecters, and B) If I combine both the checkbox and star icon into their own div and only call the not() function on that single inner div, it still does not work. Is there something wrong with the not() function or am I somehow doing it wrong? Any suggestions on how to do this???

$('div.messages_list').click(function(){
    var messageid = $(this).attr('messageid');
    $.ajax({
    type: "POST",
        url: "./ajax.message_go.php",
        data: "id=" + messageid,
        success: function(data){
            window.location.href = data;
        },
        error: function(){
        }
    });
});    

Answer 1

you can make separate click event handlers for star and checkbox and call event.stopPropagation in them to not cause the message click.

$(".star").click(function(event){
   event.stopPropagation();
});

of course if the star and checkbox are children of message box.