jQuery click() for video element

Question

I'm working on SimpleWebRTC. When new party join a room, new video element is added. Now I need to handle click on any of the video element. So I write the code bellow

$('video').click(function(e) {
       console.log('clicked');

       e.preventDefault()
});

Obviously the block was within jQuery document ready. But I'm not seeing anything on console. The weird thing is when I'm pasting the code above in console of browser, that's working as expected.

I need your guideline to solve the issue.

Thanks.

Did you try running your code inside of webrtcs innit function? `webrtc.on('readyToCall', function () { ... }` — Aer0, May 21 '16 at 08:00
`$(selector).click()` will add the click event handler only to the elements already on the page. What you want is event delegation (`$(document).on('click', 'video', func)`) There are already a lot of dupes, let me find [one](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on). — Kaiido, May 21 '16 at 08:02

score 1 · Accepted Answer · answered May 21 '16 at 08:26

1

First of all: define a class for video tag. For example: .chat like this:

<video class="chat" />

and use this code:

$('video.chat').on('click', function (e) {
    console.log(this);
});

or:

$(document).on('click', 'video.chat', function (e) {
    console.log(this);
});

I hope it helps you.

answered May 21 '16 at 08:26

Marek Woźniak

1,766
16
34

Last one worked. I'm still confused why **$('video.chat').on('click', function (e) {** not worked but **$(document).on('click', 'video.chat', function (e) {**. – LuckyCoder May 21 '16 at 09:21

score 0 · Answer 2 · answered May 21 '16 at 08:08

0

Try to give an id to the video element so your script should be

$('#video').click(function(e) {
       console.log('clicked');

       e.preventDefault()
});

So it should show the text "clicked" on console but I'm not sure there will happen any more

answered May 21 '16 at 08:08

Luis Gar

457
1
4
18

jQuery click() for video element

2 Answers2