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，否則它將是空的......永遠！