jQuery UI对话框onClick事件

时间:2012-04-11 13:35:39

标签: jquery jquery-ui jquery-ui-dialog

我正在尝试使用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'命令,但它仍然没有做任何想法?

2 个答案:

答案 0 :(得分:17)

首先,您的ready处理程序有语法错误。其次,如果你使用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');
    });
});

答案 1 :(得分:6)

试试此代码

&#13;
&#13;
 $(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" );
        }
      }
    });
  });
&#13;
body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}
&#13;
<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>
&#13;
&#13;
&#13;