Question

index.php

// load jquery.js and jquery.ui.js
$("#dialog_a").load("template_a.php").dialog();
$("#dialog_b").load("template_b.php").dialog();

template_a.php

just HTML, no JS

template_b.php

// !!! -> load jquery.js and jquery.ui.js <- !!!
$("#dialog").load("template_c.php").dialog({modal:true});

As you can see, I load two dialogs. #dialog_a just loads text without any function BUT #dialog_b loads a stand-alone-script which includes jquery and jquery.ui again.

After opening #dialog_b (by anchor/onclick) it’s not possible to access objects in the index.php (e.g. closing a dialog). For me it seems like template_b.php overwrites the DOM. But I’ve no idea how to fix this problem. Do you have?

Thanks in advance!

Answer 1

Solution: use the jQuery live() function!

index.php

$(".anchor_in_dialog_or_not_doesnt_matter").live("click", function() {
    $("#dialog").dialog();
});

template_b.php

if ($_GET["standalone"])
    // load jquery, jquery.ui
endif;

I hope it helps somebody!

Edit: As adamb already mentioned below, use on() instead of live()!