title: jQuery on click event is lost after DOM updated by ajax call
body: <p>I have something working, but as I'm not a so used to code in JS, I don't know if it's the right way to do it.</p>
  
  <p>I have a simple:</p>
  
  <pre><code>&lt;div class="offers"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And by calling <code>myUrl</code>, I retrieve ready to use HTML (some <code>.offer</code> div) that I then <code>append</code> to the <code>.offers</code> div.
  But I want to have a click event on these freshly appended <code>.offer</code></p>
  
  <pre><code>$.ajax({
      'url': myUrl,
      success: function(data){
          offers.append(data);
          $('.offer').on('click', function(e) {
              e.preventDefault();
              $('.offers .offer').removeClass('selected');
              $(this).addClass('selected');
          });
      }
  });
  </code></pre>
  
  <p>Thank you for your expertise !</p>