I am using jquery UI dialog to show comments or other text depending upon what is clicked.

Here is my JSfiddle link Dialog Demo

I have used the 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

    }

});

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.

$(document).on('each', '.showComments', function () {

    var panel = $(this).parent().siblings('.divCommentDetail');

    $(this).click(function () {

        panel.dialog('open');

    });

});

but this doesn't work at all. Am i doing something wrong.

Thanks for the help.