jquery set onclick on dialog div

jquery set onclick on dialog div

I've searched all over for the answer to this. I've found similar issues
and attempted their recommendations, all to no avail, so I'm trying to
post my issue here. Please forgive any duplication. Also, I'm an
experienced Javascripter but a jQuery noob.
My Problem: I have a modal jQuery UI dialog with a button btnStates (not
in the parent dialog's buttons array, but in the div). Upon clicking the
button, I want it to popup a second modal dialog of a div I have in the
html with its display set to none. The div contains only a simple select
element of state options. The user must select a state and press OK, or
Cancel to return to the parent dialog.
I can't get it to work. In one configuration of the code, it would popup
my states dialog upon document.ready, but ignore that I had coded it to
the click event. Can someone tell me where my jQuery is wrong to achieve
this? Here is my lastest attempt at the jQuery code:
$(function() {
$("#tabs").tabs();
$( "#dlgInstitutionSearch" ).dialog(
{
dialogClass: "no-close", minWidth:512, minHeight:410,
closeOnEscape:true,
buttons: [
{ text: "Search", click: function() { $( this ).dialog(
"close" ); } },
{ text: "Cancel", click: function() { $( this ).dialog(
"close" ); } },
{ text: "Help", click: function() { $( this ).dialog(
"close" ); } }
]
});
$("#btnStates").click(function(){
$("#dlgStatesList").dialog({
dialogClass: "no-close", minWidth:200, minHeight:300,
closeOnEscape:true,
buttons: [
{ text: "OK", click: function() { $( this ).dialog(
"close" ); } },
{ text: "Cancel", click: function() { $( this ).dialog(
"close" ); } }
]
});
});
});