jQuery UI delete confirm call back function

I wang to use jQuery UI to implement a delete confirmation. I want to use a link to trigger the dialog. Here's my code:

<a href="http://www.google.com" class="delete">delete</a>

<script type="text/javascript">
        $(function(){

            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:140,
                modal: true,
                autoOpen: false,
                buttons: {
                    "Okay": function() {
                        $( this ).dialog( "close" );
                        return true;
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        return false;
                    }
                }
            });

            $( ".delete" ).click(function() {
                $( "#dialog-confirm" ).dialog( "open" );
                return false;
            });

        });
    </script>

What I want to do is, when the user click on cancel, it does nothing. But when the user click on okay, then it will continue to go to www.google.com.

However, no matter okay or cancel I click, it remains nothi开发者_开发问答ng happens. Any idea?

Even if you do this:

$("a.delete").trigger("click");

You still won't get to google, because after it calls handlers, jQuery triggers an event on the object. It only calls native handlers for click events if the element is not a link.

You could do something like this:

window.location.href = $("a.delete").attr("href");

Or, you could have a hidden link on the page, like this:

<a href="http://www.google.com" class="hiddenDelete" style="display:none">delete</a>

Then, on the click of the "Open" button, you could do this:

$("a.hiddenDelete").trigger("click");