Question

看看这个jsfiddle。我之前使用过jQuery对话框，这是我在另一个项目中使用的完全相同的代码。唯一的区别是我从谷歌获取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，然后你可以在click函数中分配它，仍然可以在对话功能

**对不起忘了移动链接让它工作:)现在应该没问题，这里也是一个小提琴的链接，链接动作似乎没有在小提琴中工作，但我测试了它的警报，它是通过确认：http://jsfiddle.net/GordnFreeman/wbGax/

Answer 2

您要两次声明对话框。只需将它们组合起来，按钮就会出现。

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

更新了jsFiddle

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

2 个答案: