jquery ui dialogue not working with AJAX content

I am loading AJAX content into jquery UI dialogue by clicking on a link, but it doesn't seem to work. Problem is with the popup, the link returns ajax content fine. Trying to implement this example

$.fx.speeds._default = 1000;
$(document).ready(function(){
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });

    $('#<url_id>').live('click', function(evt) {
        //evt.preventDefault();
                        $.ajaxSetup({
                            async: false,   
                            "error":function() {   
                                alert("error");
                        }});
                        $.getJSON("<url>", 
                        function(data) {
                            if(data[0][0] != nu开发者_StackOverflow中文版ll){
                                var html = '';
                                html += '<div id="dialog" title="Basic dialog">';
//concatenating html
                                html += '</div>';
                            }                       
                        });
            $( "#dialog" ).dialog( "open" );
            return false;
    }); 
});

You havent added the element with that ID to the page yet, so your selector gets no results. You need to do something like this:

var element = $(html);
$('body').append(element);
$('#dialog').dialog();

Also: You really shouldnt set ajax defaults on every click event (it's a global setting). If you need to specify additional parameters that $.getJSON doesnt provide, you should just call $.ajax directly.