event fired by a future loaded element

Question

I have a form thats loads an image. I need to do a function that is been called by the image Onclick Event.

The problem is that the selector ( I'm using jQuery) can't find the image id, because when the function is loaded the image wasn't yet there.

SOLUTION :

After the image upload -->

$("#"+foto_nom).bind({
       click:function(){
       alert(this.id); }
 });

Binding an event is the solution.

anyway, consider to accept @bodrovis answer and upvote him. And next time read docs... ;) — A. Wolff, Jul 01 '13 at 14:48
@JonathanNaguin why do you give to my question -1 points, how can I know the duplication if I don't know about .on() ???? Please take off that negative point. — Despertaweb, Jul 01 '13 at 14:49
@Blackersoul you can get rid off this {-1} points by accepting and upvoting the helper's answer — A. Wolff, Jul 01 '13 at 14:51
The Id of the image is not always the same, so that was another problem in addition. @roasted Of course before askig I always read and search in the net.... ¬¬ — Despertaweb, Jul 01 '13 at 14:54

Ilya Bodrov-Krukowski · Accepted Answer · 2013-07-01T15:01:07.357

4

You should use 'on' method to attach event to selectors that are not present during page load. Like this:

   $(document).on('click', '#id_of_your_image', function(e) {
    //your code here
    });

~~update~~

Binding event to the image after it has been added does not seem to be a good solution.

edited Jul 01 '13 at 15:01

answered Jul 01 '13 at 14:43

1

*"Binding event to the image after it has been added does not seem to be a good solution."* Why not? Of course it is dangerous to bind multiple event on one element, but if you are carefull with that, on click, it is actually faster than `.on()`. – Karl-André Gagnon Jul 01 '13 at 15:00

1 Answers1