Strange popup behaviour

When I click on the link 'alert' then the message will only popup once, which is correct. Strangely if I click on the link 'dialog' and then on the link 'alert' then the message is popping up twice consecutively, which is incorrect.

How can I fix this so that the开发者_StackOverflow message will only be displayed once?

HTML

<p id="test"><a href="#">alert</a></p>
<a href="#" onclick="showDialog()">dialog</a>

jQuery

$(function() {
  $("p#test a").click(function() {
    alert('alert');
  });
}

function showDialog(){
  $("<div class='popupDialog'>Loading...</div>").dialog({
    closeOnEscape: true,
    height: 'auto',
    modal: true,
    title: 'About Ricky',
    width: 'auto'
  }).bind('dialogclose', function() {
    jdialog.dialog('destroy');
}

You can try this script.

<script type="text/javascript">

 $(document).ready(function () {

        $("p#test a").click(function () {
            alert('alert');
        });
    });


    function showDialog1() {
        $("<div class='popupDialog'>Loading...</div>").dialog()({
            closeOnEscape: true,
            height: 'auto',
            modal: true,
            title: 'About Ricky',
            width: 'auto'
        }).bind('dialogclose', function () {
            $(this).dialog('destroy');
        });
    }
<script>