title: jQuery: Select dynamic element on ajax success
body: <p>I am trying to select dynamically created <code>element</code> on <code>ajax success</code>, I have number of <code>check boxes</code> in a <code>table</code> &amp; on <code>ajax success</code> I replace the <code>table</code> with new content which does not allow me to select any new <code>check box</code>. 
  I know that we can use <code>jQuery</code> <a href="http://api.jquery.com/on/" rel="nofollow">.on</a> function to <code>trigger click</code> on dynamic <code>elements</code> but in my case I didn't need any <code>click event</code> just need to select that <code>element</code> &amp; change the text on it. </p>
  
  <p>Here is my Code.</p>
  
  <pre><code>$('#apply').click(function()
      {
        $('#loading-overlay-please-wait').show();
        var checkIds = $('#gridviewId').yiiGridView('getSelectedRows');
        var uncheckIds   = $( 'input[type="checkbox"]:not(:checked):not(:first)' ).map(function() { return this.value; }).get();
        $.ajax(
        {
          'data':{checkedIds:checkIds,uncheckedIds:uncheckIds},
          'method':'POST',
          'url':'approve',
          'dataType':'json',
          'success':function(data)
          {
  
              if(data.status == 1)
              {
                  $('#catalogResults').html(data.content);
                  $( 'input[type="checkbox"]:not(:checked):not(:first)' ).next('span').text(' Need Approval'); //This is not working on dynamic content
                  $('input:checkbox:checked').next('span').text('Approved'); //This is not working on dynamic content
  
              }
               $('#loading-overlay-please-wait').hide();
               $('body').scrollTop(0);
          }
  
        })
  
      });
  </code></pre>