Question

I'm creating an app using Apache Cordova (phonegap) and have encountered a problem.

In my app, I have audio that automatically plays and I need to stop it when someone clicks on a video element that has been dynamically inserted in to the page via jQuery.

To view the problem I am having, visit this page in iPad and see that none of the attached events get fired. http://jsfiddle.net/PQqMC/4/

That example has events that are attached via jQuery's ".on()" method and via the ".bind()" method as well as inline events. It also tries to attach to click and touch events.

This happens in both Safari and Chrome on the iPad. Also seems to act this way sometimes on video that is not dynamically inserted.

Any way to capture the click/touch events?

Here is the code from the jsFiddle page:

$('#video_cont video').on( 'click', function(){
    alert("clicked (binded before)");   
});
$('#video_cont video').on( 'touchstart', function(){
    alert("touched (binded before)");   
});
$('#video_cont2 video').on( 'click', function(){
    alert("clicked2 (binded before)");   
});
$('#video_cont2 video').on( 'touchstart', function(){
    alert("touched2 (binded before)");   
});

$(document).ready(function(){
$('#video_cont').html( '<video ontouchstart="alert(\'ontouchstart\')" onclick="alert(\'onclick\')" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>' );

    $('#video_cont video').bind( "click", function(){
        alert("clicked (binded after)");   
});    
    $('#video_cont video').bind( "touchstart", function(){
        alert("touched (binded after)");   
    });
    $('#video_cont2 video').bind( "click", function(){
        alert("clicked2 (binded after)");   
    });    
    $('#video_cont2 video').bind( "touchstart", function(){
        alert("touched2 (binded after)");   
    });
});
Was it helpful?

Solution

As an alternative, I managed to hook in to the "play" event to track that someone clicked and started the video. For my particular use case, this was sufficient.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top