my .click with UI Dialog is making me have to double click instead of one click to open it

my .click with UI Dialog is making me have to double click instead of one click to open it


I cant really figure this out, the only thing i could see messing it
up is the javascript:void(0) inside the anchor link but since there is
a double click function and a click, it should only be one click. Does
anyone have an idea as to what is wrong here?
I put autoOpen which i think is also causing it, but i did that so the
user can open it, close it, and open it again so the delay "double
click" is saying for the first time initialize and then the second
click is opening?? if so how do i get around this?
Thanks for those that help.
HERE IS MY JQUERY
$(document).ready(function(){
$("#pro_edit_profile").hide();
$("#pro_edit_profile_link").click(function () {
$("#pro_edit_profile").dialog("open");
$(function() {
$("#pro_edit_profile").dialog({
bgiframe: true,
autoOpen: false,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
}
}
});
});
});
});
HERE IS MY HTML FOR THE LINK
<a href="javascript:void(0);" id="pro_edit_pic_link" name="Change
Profile Picture">Change Profile Picture</a>