Can't Access Dynamically Created Audio Element onClick in Chrome with jQuery

Question

In Chrome, I can't access an onclick method for an audio element (Chrome Version 41)

... for 30 Audio Files

html += '<div>';
  html += '<audio class="audio-' + i + '" controls=controls preload=none src="' + thisSrc + '">';
     html += 'Sorry. Your browser does not support the audio HTML element.';
  html += '</audio>';
html += '</div>';

... end loop

$('.output').html(html);

Because these are dynamic, I am trying the following (here is where the problem seems to be):

$('.output').on( "click", "audio", function() {
     alert('test');
});

Does not work in Chrome. Does work in Firefox.

Is it due to the shadow DOM for Chrome?

Any help is greatly appreciated, spent too much time on this already. Thank you

@dave Thank you for that, will have to create several listeners to achieve the same result. — shanehoban, Mar 23 '15 at 16:25

score 1 · Accepted Answer · answered Mar 23 '15 at 16:27

1

Thanks to @dave:

The <audio> and <video> elements do not support the click event

answered Mar 23 '15 at 16:27

shanehoban

878
9
26

Can't Access Dynamically Created Audio Element onClick in Chrome with jQuery

1 Answers1