title: CSS and JQuery doesn't work after Ajax call
body: <p>My excuses: First off all, I would like to explain that I've been searching for an answer a long time. I found so many similar questions, but none with a solution for my scenario. </p>
  
  <p>The Problem: After an Ajax call, where I dinamicaly add HTML code, the code added looses its styles and action responses (on click, for example).</p>
  
  <p>HTML : The HTML that is loaded with page loading. It renders the collection of the user's images correctly. I mean... the style is ok and the JS functions bind to the classes 'visualizaImagem' and 'deletaImagem' works fine.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12" id='imagens'&gt;
          &lt;?php 
          if(isset($imagens)){
  
              if(count($imagens) &gt; 0){
  
                  foreach($imagens as $imagem){
  
                      echo "
                      &lt;div class='file-box' data-path='" . $imagem['path'] . "' id='" . $imagem['nome'] . "'&gt;
                          &lt;div class='file'&gt;
                              &lt;a class='visualizaImagem' data-path='". $imagem['path'] ."'&gt;
                                  &lt;div class='icon'&gt;
                                      &lt;img src='../" . $imagem['path'] . "' style='height:100%'&gt;
                                      &lt;a class='deletaImagem' data-path='". $imagem['path'] ."' data-divid='" . $imagem['nome'] . "'&gt;
                                          &lt;i class='fa fa-trash' style='position:absolute;top:10px;left:10px;font-size:18px;'&gt;&lt;/i&gt;
                                      &lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class='file-name'&gt; " . $imagem['nome'] . "&lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;";
                  }
              }
          }
          ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS : When I click to the upload button (that is not part of this code), the image data is passed through "data: dados", read by "salvaImagem" in the specific controller and than appended to the page. The image is actually appended, but with no css style and no response to the functions that should have been bind to the same classes presented above.</p>
  
  <pre><code>jQuery.ajax({
          type: "POST",
          url: "salvaImagem",
          data: dados,
          dataType: "json"}).done(function(response)
          {
              if(response.sucesso){
  
                  toastr['success'](response.msg);
  
                  var img = "" +
                          "&lt;div class='file-box' id='" + response.nome + "' data-path='" + response.path + "'&gt;" +
                          "   &lt;div class='file'&gt;" +
                          "       &lt;a class='visualizaImagem' data-path='"+response.path+"'&gt;" +
                          "           &lt;div class='icon'&gt;" +
                          "               &lt;img src='../"+response.path+"' style='height:100%'&gt;" +
                          "               &lt;a class='deletaImagem' data-path='"+response.path+"' data-divid='"+response.nome+"'&gt;" +
                          "                   &lt;i class='fa fa-trash' style='position:absolute;top:10px;left:10px;font-size:18px;'&gt;" +
                          "               &lt;/a&gt;" +
                          "           &lt;/div&gt;" +
                          "           &lt;div class='file-name'&gt; "+response.nome+"&lt;/div&gt;" +
                          "       &lt;/a&gt;" +
                          "   &lt;/div&gt;" +
                          "&lt;/div&gt;";
  
                  $('#imagens').append(img);
              }
              else{
                  toastr['error'](response.msg);
              }
          });
  </code></pre>
  
  <p>I think I should give a little bit more about the code. Here is an example of how I bind functions to those classes. Actually as I wrote the function inside the bind, I was expecting that would't be necessary to rebind.</p>
  
  <pre><code>$('.deletaImagem').on('click', function (){
      var path = $(this).data('path');
      var div_id = $(this).data('divid');
  
      jQuery.ajax({
          type: "POST",
          url: "deletaImagem",
          data: {'path':path},
          dataType: "json"}).done(function(response)
          {
              if(response.sucesso){
  
                  toastr['success'](response.msg);
                  $('#'+div_id).remove();                 
              }
              else{
                  toastr['error'](response.msg);
              }
          });
      return false;
  });
  </code></pre>
  
  <p>Trying to use some of the tips friends gave me here, I tried the following, but no success either.</p>
  
  <pre><code>jQuery.ajax({
          type: "POST",
          url: "salvaImagem",
          data: dados,
          dataType: "json"}).done(function(response)
          {
              if(response.sucesso){
  
                  toastr['success'](response.msg);
  
                  var img = &lt;HTML original code here&gt;
  
                  $(img).appendTo('#imagens').find('.deletaImagem').on('click', deletaImagem);
                  $('.visualizaImagem').on('click', visualizaImagem);
              }
              else{
                  toastr['error'](response.msg);
              }
          });
  
   function deletaImagem(){
      var path = $(this).data('path');
      var div_id = $(this).data('divid');
  
      jQuery.ajax({
          type: "POST",
          url: "deletaImagem",
          data: {'path':path},
          dataType: "json"}).done(function(response)
          {
              if(response.sucesso){
  
                  $('#'+div_id).remove(); 
                  toastr['success'](response.msg);
              }
              else{
                  toastr['error'](response.msg);
              }
          });
      return false;
  }
  </code></pre>