jQuery UI Dialog - Keeping a clicked link inside an already open jQuery UI Dialog

<script type="text/javascript"> 
$(document).ready(function() {
    $('#mardicion').each(function() {
        var $link = $(this);


        $link.click(function() {
      开发者_StackOverflow      var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    width: (pageWidth()*0.9),
                    height: (pageHeight()*0.9)
                });
                $dialog.dialog('open');

                return false;
        });
    });
});
</script>

I use the above javascript to load a page when I click a link, the page loads correctly but when I click another link inside the dialog the clicked link opens in the browser window instead of inside the dialog. I've heard that using a click handler is the proper way to do this (that the link opens inside the Dialog), but I'm not sure how to implement it with a jQuery UI Dialog.

Thanks!

You'll have use the live() function. At a certain time (I guess on page load) you attach a click event handler to a certain number of items with the ID mardicion. When the page is loaded into your dialog, the links inside that page, even though they might have the madicion ID, their click events are not hooked up.

Use $('#madicion').live('click' , function(e) {}) to catch the click events also of all items, even if they are added to the page at a later stage.

As a side note:

1. it seems like you are misusing the ID attribute. You are only allowed to have one element per ID. Seeing $('#XXX').each() shows that you have more than 1 item. The correct way to handle these things is to give those elements a CSS class, and use $('.XXX').each();
2. The use of each is not necessary: $('#XXX').click(function() { }) applies the stated function to each one of the elements.