Unable to bind events in JQuery?

Question

Why aren't events being binded in my simple JQuery code? - http://pastebin.com/24J6q5G0

Relevant sections:

<div class="videoWrapper">
    <video controls preload autoplay>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>

<div class="videoWrapper">
    <video controls preload="none">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>
</div>

And the javascript:

$(document).ready(function() {
    var vid0 = $(document.getElementsByClassName('videoWrapper')[0]);
    var vid1 = $(document.getElementsByClassName('videoWrapper')[1]);
    vid1.hide();
    vid0.bind('ended', function() {
        vid1.show();
    })
})

(I have been following along with Detect when an HTML5 video finishes)

The event needs to be done on the `source` tag not the `video` tag, so changing it to: `vid0.children().bind('ended', function() {` works. — stackoverflowuser95, Sep 30 '13 at 10:07

Arun P Johny · Answer 1 · 2013-09-30T10:14:09.123

2

The ended event is not propagated(bubbled), so try

$(document).ready(function() {
    var wrappers = $('.videoWrapper');
    wrappers.eq(1).hide()
    wrappers.eq(0).find('video').bind('ended', function() {
        wrappers.eq(1).show();
    })
})

In your case you are binding the event to the wrapping div element, but the ended event is not bubbled to the parent element which means your handler will never get executed.

edited Sep 30 '13 at 10:14

answered Sep 30 '13 at 10:08

Arun P Johny

384,651
66
527
531

The `.eq`, does that have similar complexity to a simple array access? – stackoverflowuser95 Oct 02 '13 at 12:56
@stackoverflowuser95 the problem is again you need to wrap it using jQuery – Arun P Johny Oct 02 '13 at 12:57
To repeat my question, is there any different between simple array access and `.eq` in terms of computational complexity and performance? – stackoverflowuser95 Oct 06 '13 at 18:13

score 0 · Answer 2 · answered Sep 30 '13 at 10:09

Firstly, the events for HTML5 video fire on the video element, so you're attaching to the wrong element. Also, your'e method of creating jQuery selectors is a bit odd. Try this:

var $vid0 = $('.videoWrapper video').eq(0);
var $vid1 = $('.videoWrapper video').eq(1);
$vid1.parent().hide();
$vid0.bind('ended', function() {
    $vid1.parent().show();
})

Example fiddle

score -1 · Answer 3 · answered Sep 30 '13 at 10:16

-1

The reason it's not working is because your vid0 is the wrapper div and the ended event needs the video tag.

Here is a working demo fix: http://jsfiddle.net/

I added #video0 and #video1 to the video tag.

answered Sep 30 '13 at 10:16

Miro

8,402
3
34
72

score -1 · Accepted Answer · answered Oct 02 '13 at 12:55

The solution I used (think there was only one [wrong] answer at the time) was:

$(document).ready(function() {
    var vid0 = $(document.getElementsByClassName('videoWrapper')[0]);
    var vid1 = $(document.getElementsByClassName('videoWrapper')[1]);
    vid1.hide();
    vid0.children().bind('ended', function() {    // Note this line
        vid1.show();
    })
})

Unable to bind events in JQuery?

4 Answers4