CODEWITHSUNDEEP
jquery
palAlaa
palAlaa

Reputation: 9868

Get id of specific element not the parent element

I want to get the id of specific element on click, but the problem is that the if the element doesn't have an id, then the function still in a loop for all element's parents that have an ID!!

here's an example, how can I make it alert only for once for specific element?

http://jsfiddle.net/RUadJ/1/

Upvotes: 0

Views: 131

Answers (7)

John Paul Cárdenas
John Paul Cárdenas

Reputation: 127

The selector * is inefficient because it retells all again, it will show you 2 * (elements) loops

$("*").click(function(e){
    var elementCount = $("#parent").find("*").length;
    $("body").prepend("<h3>" + elementCount + " elements found</h3>");
});

Upvotes: 0

Michael Robinson
Michael Robinson

Reputation: 29508

This example will only alert if the element that was directly clicked has an ID.

Without knowing more about what you're trying to achieve, it is hard to offer a better answer.

$("*").click(function(e){
    e.stopPropagation();
    if($(this).attr("id") != null){
        alert("have id ");
    }
});

Upvotes: 1

Dips
Dips

Reputation: 3290

Well in this case you can target specific class

$("div.foo").click(function(e){

if(!$(this).attr("id")==''){
    alert("have id ");
}
    else
    {
            alert("doesn't have id ");
    }
});

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150078

The problem is you've attached your click handler to every element on the page, and click events bubble. That is, when you click on a child element its click handler will be called, and then its parent's click handler will be called, and so forth. You can stop the event from bubbling using the .stopPropagation() method as follows:

$("*").click(function(e){
   e.stopPropagation();

   // your other code here
});

Demo: http://jsfiddle.net/RUadJ/6/

(Or just return false from your click handler.)

Alternatively you can compare the event.target property to this - if they are the same you know you are processing the "original" click event before it bubbles. (If they are different you know the event has already bubbled.)

P.S. Attaching your click handler to every element is terribly inefficient. You can just attach a single handler to the document and then event.target (mentioned above) will be the original element clicked on so you can still test its id. Then you don't have to worry about bubbling because the click has already bubbled as far as it can:

$(document).click(function(e){
   if($(e.target).attr("id")!= null)
      alert("have id ");
   else
      alert("doesn't have id ");
});

Demo: http://jsfiddle.net/RUadJ/26/

Upvotes: 3

TecToN
TecToN

Reputation: 113

It's the Javascript event bubbling. The click event will pop up and if you want to stop it, just add the following code:

e.stopPropagation();

after if-else sentence.

Upvotes: 0

Igor ostrovsky
Igor ostrovsky

Reputation: 7392

The reason why the function "loops" is because the event is bubbling up the DOM. To stop the bubbling up, add this code to the top of your handler:

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

Upvotes: 1

Alexander
Alexander

Reputation: 171

The problem is in the * symbol. Try something more specific for example img or a class

$("*").click(function(e)....

Upvotes: 0

Related Questions