jQuery UI對話框onClick事件

Question

我試圖用onclick命令打開一個對話框，但我沒有任何運氣。我已經嘗試了一切，並且我可以讓它工作。

下面的對話框的jQuery：

<script type="text/javascript"> 
     $(function runDialog(){ 
      $('#testimonialOpen').dialog({ 
       autoOpen:false 
       }); 
      }) 
    </script> 

有一個div id'd testimonialOpen所以我知道它選擇的元素，並且對話框工作時的AutoOpen被刪除，但是，當我嘗試和呼叫像這樣的功能：

<p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p> 

它只是沒有做什麼。我試圖在jQuery中使用'open'命令，但它仍然沒有任何想法？

Answer 1

首先，您的就緒處理程序有語法錯誤。其次，如果你使用jQuery，你應該使用它來附加你的事件，而不是笨重和過時的onclick屬性。

試試這個：

<p class="topper"> 
    Top words 
    <a href="#"> 
     <img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/> 
    </a> 
</p> 

$(function() { 
    $('#testimonialOpen').dialog({ 
     autoOpen:false 
    }); 

    $(".topper a").click(function(e) { 
     e.preventDefault(); 
     $('#testimonialOpen').dialog('open'); 
    }); 
}); 

Answer 2

試試這個代碼

$(function() { 
 
    $("#ok_link").click(function(e) { 
 
     e.preventDefault(); 
 
     $('#dialog-confirm').dialog('open'); 
 
    }); 
 

 
    $("#dialog-confirm").dialog({ 
 
     resizable: false, 
 
     height:160, 
 
     modal: true, 
 
     minWidth: 400, 
 
     autoOpen:false, 
 
     buttons: { 
 
     "OK": function() { 
 
      location.href="index.html"; 
 
     }, 
 
     Cancel: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    }); 
 
    });

body { 
 
\t font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; 
 
\t font-size: 62.5%; 
 
}

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<a href="index.html" id="ok_link">OK</a> 
 

 
<div id="dialog-confirm" title="Are you sure to go home?"> 
 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You are about to redirect to home page. Are you sure?</p> 
 
</div>