Cannot bind delegate onClick event on .use-ajax elements I have a view, that is refreshed with ajax. I'm using Jquery 1.7.2

You click a button, that call a javascript function :

$(view_identifier).trigger('RefreshView');


Before this refresh, I've attached on click handler to an ajax link.
The link call a modal popup and must trigger a javascript function.
The link contains a picture, but I have tested with just text and I get the same result.
So I'm trying to attach an handler to an ajax link. 

Here is the html :

&lt;body&gt;
 //lot of things .... 
   &lt;a class="use-ajax"&gt;
      &lt;img width="25" height="25" src="/sites/default/files/picture.png"&gt;
   &lt;/a&gt;
 //lot of things
&lt;/body&gt;


And here is the javascript :

$('a.use-ajax &gt; img').on('click',function(){
  console.log('test');
  foo();
});


That work fine, until the view is refreshed. After the refresh, the function foo isn't being called anymore. Thats because the handler is not being attached to dynamic elements. 

So I change the part above to this : 

$(document).on('click','img',function(){
  console.log('test');
  foo();
});


So that I can use the event delegation provide by Jquery.

And it isn't working.
When I click on the link, nothing is happening.
The strange part is when I remove the use-ajax on the link  (become a normal link without the Drupal ajax part), it works.

I've tested a lot of variation and nothing seems to work.

I've used an old jquery code :

$(document).click(function(event){
   //check if its a click on the link with event
   console.log('test');
})


and It doesn't trigger either. If I click anywhere on the page, the 'test' show up in console, but not when I click an ajax link. I don't understand this because, it would mean that the link isn't in the dom.

Does anyone have an idea ?
Thanks to Clive, I've found one way to make it work : wrap the code into a drupal behavior.

It look like this : 

(function($) {
  Drupal.behaviors.refresh_views = {
    attach: function () {

        var view_identifier = '#view_id'; 

        //attach the on click handler to all links of class 'use-ajax'
        $('a.use-ajax').on('click',function(){
            $(view_identifier).trigger('RefreshView');
        });
    }   
  };
})(jQuery);


I'm attaching an handler with my first version of the onclick function : 

$('a.use-ajax').on('click',function(){
    foo();
});


So without the delegate part (does not work when an element is created after the script execution). In my case, I'm reloading the view with an ajax request. And in drupal 7, each time a request finishes the ajax behavior is called again. So the code is executed and it bind the on click event into the new elements. 

I'm leaving a little warning here : 
This script is executed on every ajax request (if you open a modal popup in the ajax way, it will add an event into the click handler). So it might bind a lot of time the same event ! So don't forget to control the amount of events that your are adding to the same handler.