title: Jquery function doesn't work on DOM elements added by AJAX
body: <p>here is my code:</p>
  
  <pre><code>    $.ajax({
          url: "a.php",
          type: $(this).attr('method'),
          data: data,
          complete: function (xhr, result) {
              if (result == "success") {
                  $("#field-option").remove();
                  var chaine = '&lt;section id="field-put"&gt;&lt;ul&gt;';
                  var container;
                  var passwords = xhr.responseText.split(";");
                  for(var i= 0; i &lt; passwords.length; i++) {
                      chaine += '&lt;li&gt;&lt;input type="text" class="put" id="field'+i+'" value="'+passwords[i]+'"&gt;&lt;input type="button" value="Copy" name="copy" class="btn-put" data-clipboard-target="#field'+i+'"&gt;&lt;span class="clear"&gt;&lt;/span&gt;&lt;/li&gt;';
  
                  }
                  chaine += '&lt;/ul&gt;&lt;/section&gt;';
  
                  $("#main-area").append(chaine);
  
                  $('#field0').shuffleText("My output text");
  
                  new Clipboard('.btn-put');
              }
          }
      });
  </code></pre>
  
  <p>The problem is on the line</p>
  
  <pre><code>$('#field0').shuffleText("My output text");
  </code></pre>
  
  <p>The function shuffleText doesn't apply, because #field0 is generated by Ajax so append to the DOM after the initial DOM.</p>
  
  <p>If #field0 is already in the initial DOM, shuffleText is applicate, but I need to applicate the function on the Ajax returns input elements...</p>
  
  <p>How can #field0 be find after it is append to the DOM ?</p>
  
  <p>Thanks for help</p>