A question regarding bypassing quotation marks in javascript

A question regarding bypassing quotation marks in javascript

Hello guys,

I am trying to do a gallery here. I am using jQuery to create a div, where the images would be displayed, use the predefined info on array to loop through using for each command and then write images to the stage and generate dynamic listeners and functions for each image. I am, however, unable to get id's from displayed pictures. I tried bypassing quotation marks, but nothing sensible came up. I've been stuck here for the past few days. Hopefully it doesn't sound very silly to you.

index.html:
  1. <html>
  2. <head>
  3.       <script type="text/javascript"src="jquery-1.4.min.js"</script>
  4.       <script type="text/javascript" src="js_question.js"></script>
  5. </head>
  6. <body>
  7.       <div class="test"></div>
  8. </body>
  9. </html>
and js_question.js:
  1. $(document).ready(function() {
  2. $('.test').append('<div id=\"new_div\"></div>');
  3. var new_div = $( "#new_div" );
  4. array = [ "images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png" ];
  5. showElements(array);
  6. function showElements(array) 
  7. {
  8. $.each (
  9. array,
  10. function( i, objValue ) {
  11. start = "<div id=\"photo\" onclick=\"doAlert(i)();\"><img src=";
  12. end = "></div>";
  13. new_div.append( $( start + objValue + end) );
  14. new_div.append( $('<script>function doAlert(i)() { alert("Image number is:(i)"); }</script>') );
  15. }
  16. );
  17. }
  18. });
On line 12 on the  js_question.js, where I've set up an onclick event listener for (doAlert(i)()), which should then use the function given to it's number (on line 15) and then alert the correct instance number.

Do you think this would be the right approach doing such gallery?

Thanks in advance!