jquery - 为什么我的 jQuery 按钮没有显示在我的对话框上？

Question

看看这个 jsfiddle 。我以前使用过 jQuery 对话框，这与我在另一个项目中使用的代码完全相同。唯一的区别是我从 google 获取 jQuery 库，而不是自己托管它们:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js">  </script>


<div id="dialog-confirm" title="Confirmation Required" > 
            <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Do you want to delete?</p> 
        </div>
<a href="http://google.com" class="deleteLink">Test Dialog</test>

然后我有一个像这样的脚本:

 $(document).ready( function () {
$("#dialog-confirm").dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  height:180,
});

$(".deleteLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");

$("#dialog-confirm").dialog({
    buttons : {
    "Confirm" : function() {
        window.location.href = targetUrl;
    },
    "Cancel" : function() {
        $(this).dialog("close");
    }
    }
});

$("#dialog-confirm").dialog("open");
});

} );

对话框按预期显示，但按钮(确认/取消)未显示。我想我正在加载所有相关的 jQuery 库和 CSS 文件。我还缺少其他东西吗？

我使用FireBug验证它确实调用了按钮设置代码，但仍然没有按钮。

Answer 1

您的代码现在无法工作的原因可能是由于您使用旧版本的 jQuery 或 jQuery UI，无论哪种方式，这里都有一个可能的修复方法:

$(document).ready( function () {
var targetUrl;
$("#dialog-confirm").dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  height:180,
  buttons: {
    "Confirm" : function() {
        window.location.href = targetUrl;
    },
    "Cancel" : function() {
        $(this).dialog("close");
    }
    }
});

$(".deleteLink").click(function(e) {
e.preventDefault();
targetUrl = $(this).attr("href")    
$("#dialog-confirm").dialog("open");
});
});

应该在创建 .dialog 函数时分配按钮，以便在单击按钮时仍然能够传递 URL 我全局创建了 targetURL，然后您可以在单击函数中分配它并仍然在对话框功能

**抱歉忘记移动链接以使其工作:)现在应该没问题了，这里还有一个指向 fiddle 的链接，链接操作似乎在 fiddle 中不起作用，但我用警报测试了它，它是通过正常:http://jsfiddle.net/GordnFreeman/wbGax/