How to ask for confirmation and use e.PreventDefault on click event

Viewed 19807

I'm trying to implement some very basic (in my opinion) functionality with jQuery. I have Delete link:

<a href="/Delete" class="prompt-for-delete">Delete</a>

and all I want is when the link is clicked to show some kind of confirmation window like:

Are you sure you want to delete this : Yes/No

And if No is clicked I want to prevent the link from executing. I use jquery-1.10.2.min.js and jquery-ui-1.10.3.min.js my HTML is:

<div id="dialog-confirm" ></div>
<a href="/Delete" class="prompt-for-delete">Delete</a>

I tried several options I found on the internet. The last one is:

$(document).ready(function () {

        $('.prompt-for-delete').click(function (e) {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });

    });

which is just to get something working but with this I get the dialog opened and automatically closed after a second. It seems like something very standard so could you provide an example of how to achieve this?

5 Answers
<a href="_blank" onclick="if(!confirm('Are you sure?')) event.preventDefault()">click</a>
Related