CODEWITHSUNDEEP
jqueryonclick
Du3
Du3

Reputation: 1422

How to determine if child was clicked in Jquery

Is there a ways in jQuery to tell which child was clicked if the onclick event was binded to the parent?

For instance:

  $('#daddy').click(function () {
    // if($("#son").isClicked()){return true;}
    //return false;
  });

and the markup looks like:

<div id="daddy">
  <span id="son"></span>
  <span id="daughter"></span>
</div>

Upvotes: 18

Views: 33342

Answers (6)

Luca C.
Luca C.

Reputation: 12564

use event.target to get the really clicked node:

$('#daddy span').on('click',function(event){
    if(event.target.nodeName=='BUTTON'){//Was clicked a button
        ....
    }
    if(event.target.id=='id'){//Was clicked #id
        ....
    }
    ...
});

Upvotes: 1

Eric Hodonsky
Eric Hodonsky

Reputation: 5897

This should be a different perspective at least:

$('#parent').on("click", function(evt) {
        evt.stopPropagation();
        if($.inArray(evt.currentTarget, $(this).children())){
            console.log(evt.currentTarget);
        }
});

Upvotes: 2

frictionlesspulley
frictionlesspulley

Reputation: 12358

check this demo out

$(function() {
    $('#parent').delegate('a', 'click', function(evt) {
        debugger;
        evt.stopPropagation();
        alert($(evt.currentTarget).attr('id'));
    });
});​

Upvotes: 1

Pat
Pat

Reputation: 25675

You can use the event.target to determine what was clicked:

  $('#daddy').click(function (e) {
      alert(e.target.id); // The id of the clicked element
  });

Here's a simple example.

Upvotes: 6

FishBasketGordo
FishBasketGordo

Reputation: 23132

The event handler you pass to click will receive an event object as its first argument. The target of the event (i.e. the element that initiated the event) will be specified there.

Here's an example from the jQuery documentation:

<!DOCTYPE html>
<html>
<head>
  <style>
span, strong, p { 
  padding: 8px; display: block; border: 1px solid #999;  }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="log"></div>
<div>
  <p>
    <strong><span>click</span></strong>
  </p>
</div>
<script>

$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});

</script>  
</body>
</html>

Upvotes: 25

Malitta N
Malitta N

Reputation: 3423

Try this for an alternative

$('#daddy span').click(function () {
    var clicked = $(this).attr('id');
    if(clicked == "son"){
        return true;
    }
    return false;
});

Upvotes: 0

Related Questions