Question

I let the user create images and buttons (a button with image above it)by clicking on a button: “new_a_window” so I use append() in jQuery. But the question is that I have to get the different image as the user press on it.

As the user click the “new_a_window” button, jQuery will create a button with a image in a jDialog(story_pages).

$( '#new_a_window').bind('click',function(){
 $('#story_pages').append('<div><button value=window_value
 style="width:100px; height:100px" >

 <img id=window_value src="../pic/white.png" width="100px" height="100px"> 
 </button></div>');
 window_value= window_value+1; //I give each of the images a unique integer value since of 
                               // the value is the index of a image array. 
 })

I have to implement the scenario:

As the user presses on the image button, I can get the image’s id value.
However, after appending the code snippet above, each image’s value is “window_value”,
I can’t select it by value. How can I do?

Answer 1

try

$('#story_pages').append('<div><button value=window_value
 style="width:100px; height:100px" >

 <img value="'+window_value+'" src="../pic/white.png" width="100px" height="100px"> 
 </button></div>');

Issue is that you were simple setting the value to a string ‘window_value’ not the value inside a variable.

Hope this helps

UPDATE

ID should never be a number, if you wish to use id you will need to add text before it.

'<img id="window'+window_value+'" src="'

to select either one you could possibly do.

$('#window1') for id’s or i believe $('img[value="1"]') would work with values
(not 100% as value is not a standard attribute)