title: Can I use jQuery $(document).on('each', '.showComments', function(e) {})
body: <p>I am using jquery UI dialog to show comments or other text depending upon what is clicked.</p>
  
  <p>Here is my JSfiddle link <a href="http://jsfiddle.net/brijesh26/6wMRe/3/" rel="nofollow">Dialog Demo</a></p>
  
  <p>I have used the code</p>
  
  <pre><code>$('.showComments').each(function () {
      var panel = $(this).parent().siblings('.divCommentDetail');
      $(this).click(function () {
          panel.dialog('open');
      });
  });
  
  $('.showContractChanges').each(function () {
      var panel = $(this).parent().siblings('.divContractChangeDetail');
      $(this).click(function () {
          panel.dialog('open');
      });
  });
  
  
  $(".divCommentDetail, .divContractChangeDetail").dialog({
      autoOpen: false,
      modal: true,
      open: function () {
          $(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
      },
      show: {
          effect: 'blind',
          duration: 1000
      },
      hide: {
          effect: 'explode',
          duration: 1000
      }
  });
  </code></pre>
  
  <p>and the content is added dynamically on page load. I am trying to use $(document).on('each', '.showComments', function(e) {}); so that it can work with dynamically loaded content, but it doesn't work at all. here is my modified code.</p>
  
  <pre><code>$(document).on('each', '.showComments', function () {
      var panel = $(this).parent().siblings('.divCommentDetail');
      $(this).click(function () {
          panel.dialog('open');
      });
  });
  </code></pre>
  
  <p>but this doesn't work at all. Am i doing something wrong.</p>
  
  <p>Thanks for the help.</p>