如何从AJAX打开的Modal内部的链接加载jQuery Modal

Question

I've read a few answers to this but none match my issue:

1. I would like to load html into a Modal from an AJAX request - (which I already have and it works great)

2. I would like to click on a link inside the loaded modal which then opens up another Modal with more details which could have more links to Modals to open again. - I can then drag these around the page and have lots open.

So obviously when I click a link in the loaded Modal it goes to that page, rather than opens it in another Modal.

<script type="text/javascript">
$(document).ready(function() {
    $('a.open').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 600
            });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });
});

Then my HTML is

<a href="reports?report=cows" class="open" title="Cows" class="open" >List Cows</a>

The in the loaded Modal the html could be:

<a href="reports?report=cow_detail" class="open" title="Cow Detail" class="open" >Cow #43</a> <br />...

And this would then open another Modal with the detail.

So I'm looking or expecting to be able to load that first bit of JavaScript after the modal loads to get the newly created class="open" tags that wouldn't be seen when on document load.

Much appreciated!

Answer 1

Use the code when the modal window is loaded.

$('#myModal').on('show.bs.modal', function (e) {
    $('a.open').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 600
            });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });
});