JQuery对话框绑定事件到按钮

JQuery Dialog Binding Event to Button

本文关键字：按钮 事件 绑定 对话框 JQuery      更新时间：2023-09-26

我使用jQuery遇到了一些麻烦。我想有一个对话框出现，当用户单击一个链接删除的东西，并提示他们要确保他们实际上想要删除它。对话框看起来很好，但我没有看到一种方法来获得链接的url，当用户点击"是"按钮。我尝试使用event.relatedTarget属性来获取a标签的url，但它是空的。有人知道怎么做吗?

<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;
    });
});

<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.d ete元素?使用jQuery的data()通常比全局变量更好。

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

$(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/

相关文章：