jQuery detect click inside a div

Question

I am trying to use jQuery to detect when a user clicks inside a div on a page. Should be easy enough, but it's not working.

Here's a summary of my code (in the HTML):

<div class="outerDiv">
    <object id="video">
      ...
     </object>
</div>

In the jQuery:

$("body").on("click",function(e){
if(e.target.id=="outerDiv") {
   ... do something
}           
if(e.target.id=="video") {
    alert("Inside div");
}
 ...

});

However, when clicking inside the object with the id of "video", nothing happens. But if I click inside "outerDiv", this is picked up by the code.

Could it be beacse inside the "video" id I have an object (in this case a built in flash video player)?

What am I doing wrong?

Cheers :) .

Answer 1

Why not target the specific div by adding another parameter to the 'on' call?

$("body").on("click", "#flash_holder", function(e) {
   alert("clicked on flash_holder");
});

if you are only targeting a single element, probably don't need to use delegation at all:

$("#flash_holder").click(function(e) {
   alert("clicked on flash_holder");
});

Answer 2

Apparently the inner click event is processed by Flash. Such click isn't propagated out to your DOM element unless you implement it within the SWF file manually..