O problema é que o evento timeupdate
não é um bubble event. Isso significa que você não pode tratá-lo através do elemento pai, tal como feito em:
$(document).on("timeupdate", "#video", function(){
console.log('video playing');
});
Isso acontece porque o evento fica, no caso, associado ao document
e não ao elemento #video
¹. Fazer a delegação do evento direto, com JavaScript puro, é possível da forma que você fez:
document.addEventListener('timeupdate', function(e){
if(e.target.id == "video"){
console.log('video playing');
}
}, true);
As duas formas não (possivelmente nem sempre) são análogas².
Ou seja, a única forma (exceto a supracitada) é associar o evento diretamente ao elemento #video
. Você pode fazer isso no mesmo momento que você o insere no DOM, como explicado pelo Caio, em sua resposta, no exemplo 2.
O exemplo 3 do Caio funcionou da forma apresentada porque o evento click
é um bubble event.
$(() => {
const player = '<video id="video" width="400" controls><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"></video>';
$("button").on("click", event => {
$("#container").html(player);
$("#video").on("timeupdate", event => {
console.log("Video playing...");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<button>Adicionar</button>
Referências
JavaScript | Eventos bubbles
Javascript - Event order
Why don't audio and video events bubble?
Understanding Event Delegation
Notas
(1): De acordo com a página Understanding Event Delegation presente no site oficial do jQuery, quando feito algo como:
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
O evento click
é delegado ao elemento #list
e, quando tratado, é verificado se o alvo do evento combina com o seletor passado no segundo parâmetro. A ler:
This second, selector parameter tells the handler to listen for the specified event, and when it hears it, check to see if the triggering element for that event matches the second parameter.
Conforme o resumo presente na página:
Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.
A função on
realmente faz uso do efeito bubbling, ou propagação do evento, para esses casos, portanto, para um evento que não se propaga, não funcionará.
(2): Aparentemente as duas formas são análogas quando o evento em questão se propaga pelo DOM, pois o evento disparado no elemento alvo também será disparado em seus elementos antecessores, sendo disparado, portanto, também no elemento document
. Utilizar o terceiro parâmetro em addEventListener
, capture
, como verdadeiro faz com que o evento em questão seja sempre disparado também no elemento em questão, por isso a forma de delegação de evento com JavaScript puro funciona como esperado. Neste caso, fazer algo como o exemplo abaixo também é válido:
const container = document.getElementById("container");
container.addEventListener('timeupdate', function(e) {
if(e.target.id == "video"){
console.log('video playing');
}
}, true);
Ainda não achei nenhuma documentação que fale se a função on
trate todos os eventos como bubble
ou se existe um comportamento diferenciado para os eventos que não o são. Em nota 1, diz-se que o evento on
utiliza, de fato, o efeito bubbling do evento para funcionar, mas não é conclusivo se faz isso independente do evento.