0

I have following markup on aspx page where one of the element should open jQuery Dialog. Here is the markup,

<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>

I'm trying following JQuery function to open dialog box but not working,

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

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

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

Any idea what is missing?

4

1 回答 1

2

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

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

当然，第二种方式意味着创建 HTML 并将其附加到 Dialog DIV，否则它将是空的……永远！

于 2013-07-02T19:31:53.297 回答