jquery - jquery confirmation dialog doing nothing

Question

I am trying to use jquery to show confirmation dialog but nothing happens when i click the link here is the code I have, if I put alerts I can see alert in ready function but not in click:

$(document).ready(function() {
    $("#mydialog").dialog({
        autoOpen: false,
        modal: true
    });
});
$(".myconfirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
    $("#mydialog").dialog({
        buttons: {
            "Yes": function() {
                $(this).dialog("close"), window.location.href = targetUrl;
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });
    $("#mydialog").dialog("open");
});​

and on the link I am calling it like so:

<div class="topToolbar">
                    <span> <a href="/Logout.aspx" class="myconfirmLink">Log Out</a></span>
                    <div id="mydialog" title="Confirmation Required">
                <p> Are you sure you want to request a new pack?</p>
            </div>

Answer 1

Move your click binding inside the document.ready function

$(document).ready(function() {
    $("#mydialog").dialog({
        autoOpen: false,
        modal: true
    });
    $(".myconfirmLink").click(function(e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");
        $("#mydialog").dialog({
            buttons: {
                "Yes": function() {
                    $(this).dialog("close"), window.location.href = targetUrl;
                },
                "No": function() {
                    $(this).dialog("close");
                }
            }
        });

        $("#mydialog").dialog("open");
    });
});​

More than likely it's trying to bind the click event to the element before it exists in the dom. It works fine here

http://jsfiddle.net/FdBTW/

Answer 2

It looks like you're setting the click handler outside of the ready function. The $(".myconfirmLink").click(function (e) { ... }); code is being run before jQuery is ready for it.

Answer 3

Their is nothing wrong with your code. Just move your confirm link click handler code into a document.ready function to make it work.