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 :) .

do you mean `e.target.id=="video"`? instead of flash_holder .. if not where is flash_holder — wirey00, Oct 09 '12 at 13:37
You might take a look here: http://stackoverflow.com/questions/1789233/track-a-click-on-a-flash-movie-object-embed-with-jquery — swatkins, Oct 09 '12 at 13:39
Also.. your outerDiv is a class in your html but you are checking for id — wirey00, Oct 09 '12 at 13:39
Seems to work here (http://jsfiddle.net/gMWz9/) if you click on the flash. — VVV, Oct 09 '12 at 13:42
@ComputerArts what browser are you using? If I'm clicking inside the flash video there are no alerts.. but if I click outside the video and inside the div it alerts - IE9/FF15/Chrome22.0.1229.92 — wirey00, Oct 09 '12 at 13:50

score 7 · Answer 1 · answered Oct 09 '12 at 13:38

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");
});

score 3 · Accepted Answer · answered Oct 09 '12 at 13:37

3

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..

answered Oct 09 '12 at 13:37

Michal Klouda

14,263
7
53
77

1

How about this: http://jsfiddle.net/gMWz9/ Click on the flash and the alert will go off. – VVV Oct 09 '12 at 13:43
Really? It doesn't work for me (tried Chrome & IE).. Could that be somehow enabled in Flash settings? – Michal Klouda Oct 09 '12 at 13:52
@MichalKlouda That's nailed it, thanks for that, it explains a lot. Cheers. :) – dradd Oct 09 '12 at 13:53

jQuery detect click inside a div

2 Answers2