JQuery Dialog绑定事件到按钮

时间:2011-12-04 20:03:26

标签: javascript jquery jquery-ui dialog

我在使用jQuery时遇到了一些麻烦。我想在用户单击链接以删除某些内容时显示一个对话框,并提示他们确实要删除它。对话框显示正常,但是当用户点击"是"时,我看不到获取链接网址的方法。按钮。我尝试使用event.relatedTarget属性来获取a标记的url,但它为null。有谁知道怎么做?

代码

<div id="dialog" title="Delete Run">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure you want to delete that run?</p>
</div>
$(document).ready(function() {
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Yes": function(event) {
                //Go to the url in $("a.delete")
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });

    $("a.delete").click(function(){
        var url = $(this).attr("href");
        $('#dialog').dialog('open');
        return false;
    });
});

2 个答案:

答案 0 :(得分:2)

<div id="dialog" title="Delete Run">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure you want to delete that run?</p>
</div>
$(document).ready(function() {
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Yes": function(event) {
                var url = $(this).data('url');
                window.location = url;
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });

    $("a.delete").click(function(){
        $('#dialog').data('url', $(this).attr("href"));
        $('#dialog').dialog('open');
        return false;
    });
});

有点猜测,因为代码中没有元素a.delete? 使用jQuery的data()通常是比全局变量更好的选择。

答案 1 :(得分:1)

您可以在文档开头准备好url var,以便在任何函数中访问该变量。首先在(document).ready之后执行var url;,然后从delete的click函数中删除var声明,最后将窗口位置设置为该变量,如下所示:window.location.href = url;你&#39;我最终会得到这样的东西:

$(document).ready(function() {
    var url;

    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Yes": function(event) {
                window.location.href = url;
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });

    $("a.delete").click(function(){
        url = $(this).attr("href");
        $('#dialog').dialog('open');
        return false;
    });
});

我已在此处设置了您的代码示例:http://jsfiddle.net/dGETj/