dialog using a html span element

dialog using a html span element

I have a main html index page arranged in several divs and spans. I use google charts to populate the spans and arrange them. The charts and data do load and look ok. 

On the click event of one of the charts, I populate one of the span elements and throw a dialog like the following.

$.ajax({
type: "POST",
async: false,
url: "yyy_details102.cfm",
data: "djobnamespec=" + specstr + "&status_var=" + num_stat + "&r=" + Math.random(),
success: function(response) {
$("#jlistdet").html(response);
$("#jlistdet").dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
},
error: function() {
alert("From inside jqm_charts101 - Error loading job list details.");
}
});

That jlistdet element definition is as follows.
<div>
<span id="jlistdet" title="List of Jobs" style="display:inline-block;width:850px;height:400px;overflow:scroll;">
<a onclick="">Job List Details</a>
</span>
</div>

The dialog(... ) method works once when the chart is clicked.

Once I dismiss the dialog box, the element jlistdet element in the main page is not there on the page - and subsequent clicks do not work either. 

Any help or suggestion is appreciated.

Thanks