onclick is not working in mobile Jquery

Question

I am using mobile Jquery, phonegap to develop a mobile application.

Upon selectioin of item, I am generating a new dynamic page; with data-role="page" and id="bar"

So my code becomes like this.

  <script type="text/javascript" >

        function showCategory( urlObj, options )
        {
            var alphaName = urlObj.hash.replace( /.*aplha=/, "" ),

    var $page = $('<div data-role="page" id="bar">
                      <div data-role="content"> <a href="#bar?aplha='+previous+'>'+previous+'</a> 

                      <img src="img/alphabets/'+alphaName+'.png"  onclick="playAudio('+alphaName+')"  /> 

                       <a href="#bar?aplha='+next+' data-transition="slidedown">'+next+'</a>
                      </div> <div data-role="footer" data-position= "fixed"> <h4>
                      <a href="#foo">Back to Categories</a></h4> </div> </div>');
        }
</script>

I have tried almost everything to get the alert on alphaName on onclick=playAudio but all in vian. I know the problem is in giving qoutes, but somewhow I cannot figure the right way. If anyone could help please

Answer 1

Try "on" bind method

As of Jquery 1.7+ the better approach is to use on method.

$(document).on('click', 'img', function ()
 { 
alert('image is clicked')
 });

Thanks AB