JQuery打开对话框

Question

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

<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事件上创建一个已经打开的对话框，然后尝试再次打开它。我建议像重写：如果对话框doesnt已经存在

$(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'); 
      } 
     } 
    }) 
}) 

，那么你可以为改写：

<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的对话框DIV，否则它将是空的......永远！