Question

I have function like this:

$(document).ready(function () {
          $("*").click(function () {             
              alert($(this).attr('id').toString());                
        });
    });

And on Page i have something like this:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script language="javascript" src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<div id="div1">Some stuff
    <div id="div2">Some other stuff
    <asp:Button ID="Button1" runat="server" Text="Button" />        
        <div id="div3">More stuff
        <asp:Button ID="Button2" runat="server" Text="Button" />        
        </div>
    </div>        
</div>   

If i click something it works fine, but it alerts me three times(or more).
For example:
I click button2. Alertbox appears with button2.id, then with div3.id, div2.id etc. It shows me all id’s under that button.
If i try to store this id to variable like this:

     var storedId = $(this).attr('id').toString();

it stores the last one.That means i get the id of form1.

How can i get the first id? The id of clicked button or clicked label or whatever i have on my page.

Answer 1

You need to stop event propagation up the DOM tree so parent items don’t see the same event. In jQuery, you can do that with e.stopPropagation():

$("*").click(function(e) {
    alert($(this).attr('id').toString());                
    e.stopPropagation();
});

FYI, this is a really inefficient way to do this. You would do it better like this with a single event handler that takes advantage of event bubbling and catches the bubbled click events at the document and examines them in just this one place:

$(document).click(function(e) {
    alert(e.target.id);                
});