Question

我的oracle apex页面中有一个模态对话框区域。该区域具有内联对话框模板。我想在用户单击对话框的关闭按钮时触发操作。所以我写了代码

$(".ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close").click(function (e) {
      alert('Hi');
      // actions
});

对话框关闭按钮的HTML代码是

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" 
role="button" aria-disabled="false" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span></button>

但它不起作用。我怎么了？

Answer 1

将您的代码更改为：

$(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) {
  alert('Hi');
  // actions
});

你的<button>元素有多个选择器，所以你需要为所有选择器使用一个句点而没有空格（因为这些都是声明相同的元素）。

此外，如果您只使用一个选择器，则会更清楚。您不需要使用所有选择器。

像：

$(".ui-button").click(function (e) { alert('Hi'); // actions });

Answer 2

Its look like you have entered the wrong class in the selector

jQuery(document).ready(function(){
$(".ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click(function (e) {
  alert('Hi');
  // actions
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" 
role="button" aria-disabled="false" title="Close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">Close</span></button>

模态对话框关闭按钮上的jquery事件

2 个答案: