Question

我在aspx页面上有以下标记，其中一个元素应该打开jQuery Dialog。这是标记，

<asp:Repeater ID="Repeater1" runat="server" >
    <HeaderTemplate>
    <table cellpadding="5" cellspacing="0" >
    <tr align="center" >
        <th align="center"><span><a href="#" style="color:Blue;background-color:#f2f2f2;" >Open Dialog</a></span></th>
    </tr>
    .......
</asp:Repeater>

我正在尝试使用JQuery函数打开对话框但不能正常工作，

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

           $("#dialog").dialog({
               buttons: {
                   "Close": function () {
                       $(this).dialog("close");
                   }
               }
           });

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

知道缺少什么吗？

Answer 1

首先，您是否拥有ID为dialog的元素？其次，您在click事件上创建一个已打开的对话框，然后再次尝试打开它。我建议重写如下：

$(function() {
    $(document).on('click', 'th span a', function(e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");
        $("#dialog").dialog("open");
    });

    $('#dialog').dialog({
        autoOpen: false,
        buttons: {
            'Close': function(e, ui) {
                $(this).dialog('close');
            }
        }
    })
})

如果对话框 doesnt 已经存在，那么您可以重写为：

<script type="text/javascript">
    var dlg;
    $(function() {
        $(document).on('click', 'th span a', function(e) {
            e.preventDefault();
            var targetUrl = $(this).attr("href");
            dlg.dialog("open");
        });

        dlg = $('<div />', { id: 'dialog' }).dialog({
            autoOpen: false,
            buttons: {
                'Close': function(e, ui) {
                    $(this).dialog('close');
                }
            }
        })
    })
</script>

当然，第二种方式意味着在对话框DIV中创建和附加HTML，否则它将是空的......永远！

JQuery打开对话框

1 个答案: