audio or span tag not firing on Click

Sun Jul 20, 2014 9:13 pm

I have this executed html:

And I am using this code to make it play the span clicked word :

precode
var pText = ['hello','my','name','is','and','i','like','food','every','day','and','every','night'];

populate(pText);

function populate(pText) {

for(var n=0; n < pText.length; n++)
{
$('[name=p1_1]').append('<span id="s' + n + '"><audio id="a' + n + '" src="https://ssl.gstatic.com/dictionary/static/sounds/de/0/' + pText[n] +'.mp3" type="audio/mpeg"></audio>' + pText[n] + '</span> ');
}
}

$("span").on("click", "#page1_p1_1", function(){
console.log('test');
$(this).find('audio')[0].Play();
});

/code/pre

I am using a full page on the app which is designed under the tablet, and I am unable to see in the console.log(test), or the word 'test' in console when i click on any of the words. Is there any reason for this you can see ?

Thanks

Mon Jul 21, 2014 6:18 am

Hi Addy,

You use an event handler incorrectly.
Please check this reference: http://api.jquery.com/on/

Mon Jul 21, 2014 7:20 am

I fail to see my mistake?

Fire when a 'span' is clicked within div id 'page1_p1_1' . If it was wrongly syntax I would have received an error, which I do not.

According to your link, I have correctly used the .on event.

Please explain....

Mon Jul 21, 2014 7:35 am

Here is the code, for some reason I pasted the incorrect line above, but the code runs like this:

precode
$(".page1_p1_1").on("click", "span", function() {

Code: Select all

 console&#46;log('test'); 

 $(this)&#46;find('audio')[0]&#46;Play();

});
/code/pre

When you click, all that happens is the footer hides. When you click again, the footer returns. Even though the footer is 'fixed' ?

Mon Jul 21, 2014 7:40 am

I changed it to 'document', means it takes a little longer, which I was trying to avoid, so it will have to do

Mon Jul 21, 2014 10:39 pm

Hi Addy,

Please use following JS code instead of yours:

pre

$('[name="p1_1"]').append('<span id="s' + n + '" class="audioContainer"<audio id="a' + n + '" src="https://ssl.gstatic.com/dictionary/static/sounds/de/0/' + pText[n] +'.mp3" type="audio/mpeg"</audio' + pText[n] + '</span ');

//$("span").on("click", "#page1_p1_1", function(){
$("span.audioContainer").on("click", function(event){
var clickedItem = jQuery(this);

Code: Select all

 var itemId = clickedItem&#46;attr("id"); 

 console&#46;log("clicked item = " + itemId); 

 if(clickedItem&#46;find('audio')[0]&#46;Play) 
  clickedItem&#46;find('audio')[0]&#46;Play();

});

/pre

Regards.

Fri Jul 25, 2014 11:38 am

Is there any reason why the audio would not play when compiled as a iOS app? But it works when in the browser ?

Mon Jul 28, 2014 12:01 am

Hi Addy,

Please read about this issue here:

http://stackoverflow.com/questions/30...

Regads.