I am using jquery UI dialog to show ments 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.

I am using jquery UI dialog to show ments 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.

• javascript
• jquery
• html

• "each" is not an event that gets fired, it is simply a loop. Was there something not working with your code before the change? – nzifnab Commented Oct 25, 2013 at 16:35
• Hi nzifnab, when the page is loaded first time everything works fine, but my page can add more content and its using ajax to refresh, once i add new stuff the above code stops working. i see the dialog div tag content on my page, but not the dialog box. – Brijesh Commented Oct 25, 2013 at 16:59

2 Answers 2

If the .divContentDetail is added dynamically after page load, it's not the loop you need to change, but the event that you are registering:

$(document).on('click', '.showComments', function () {
  var panel = $(this).parent().siblings('.divCommentDetail');
  panel.dialog('open');
});

.on bind event that work on dynamicly added elements. But 'each' is not an event, it's a method.

You should use on like that :

$(document).on('click', '.showComments', function () {
    var panel = $(this).parent().siblings('.divCommentDetail');


    panel.dialog('open');
});