如果打开任何ui对话框,则调用函数

时间:2014-11-12 21:24:16

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

让我们说我有十个不同的对话弹出窗口,每个弹出窗口都有自己的内容和选项。

当任何对话框打开时,如何调用函数?即以下的正确语法:

$(if("*").dialog("open")) $(// do this);

1 个答案:

答案 0 :(得分:1)

每当打开对话框时,您都可以收听jQuery UI发出的dialogopen事件来执行函数。

例如:

$(function() {
  $(".dialog").dialog({
    autoOpen: false
  });
  $("button").click(function() {
    $(".dialog").dialog("close").eq($(this).index("button")).dialog("open");
  });
});
$(".dialog").on("dialogopen", function() {
  alert("a dialog opened!");
})
<link href="//code.jquery.com/ui/1.11.2/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="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<button>Open dialog1</button>
<div class="dialog" title="Basic dialog1">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button>Open dialog2</button>
<div class="dialog" title="Basic dialog2">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button>Open dialog2</button>
<div class="dialog" title="Basic dialog3">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


或者在动态生成对话框的情况下将侦听器绑定到document

$(document).on("dialogopen", function() {
  alert("a dialog opened!");
});