JQuery UI对话框从输入焦点事件启动时不会关闭

JQuery UI Dialog not closing when launched from Input focus event

本文关键字：启动 事件 对话框 UI 输入 焦点 JQuery      更新时间：2023-09-26

我有一个使用JQuery和JQuery UI的问题。我已经移动到最新的稳定版本，以防这是问题，但我已经确定它不是。我正在使用Chrome

当我使用我通过单击元素创建的对话框时，它可以正常工作。您可以多次打开和关闭它。

当我通过单击输入框使用对话框时(我使用焦点事件)。它打开了，但永远不会关闭。它从屏幕上消失，但屏幕保持模态。如果我调用对话框isOpen函数，我仍然得到true。

我找不到任何关于这个的文档。有人能解释一下行为上的差异吗?

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
	function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
	
		$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
	};
	$(document).ready(function() {
		var ret = "<div id='"RepetitionIntervalInput_dlg'" title='"Input Repetition Interval'">";
		ret += "</div>";
		$("body").append(ret);
		$( "#RepetitionIntervalInput_dlg" ).dialog({
			autoOpen: false,
			width: 500,
			modal: true
		});
		$(document).on('click.tab_stateset', "a[href$='#tab_stateset_delete']", function(event) {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
			event.preventDefault();			  	
		});
		$(document).on('focus.tab_stateedit', ".tab_stateedit_repetitioninterval", function() {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
		});
	});
</script>
</head>
<body>
<h1>A</h1>
<a href="#tab_stateset_delete">aaa</a>
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>

您的focus事件有问题，该事件被调用两次(在第一次单击时，以及在对话框关闭时)，因此您的对话框的"open"被触发两次。

解决方法是在输入端使用click而不是focus。

下面是修复的代码片段:

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
	function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
	
		$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
	};
	$(document).ready(function() {
		var ret = "<div id='"RepetitionIntervalInput_dlg'" title='"Input Repetition Interval'">";
		ret += "</div>";
		$("body").append(ret);
		$( "#RepetitionIntervalInput_dlg" ).dialog({
			autoOpen: false,
			width: 500,
			modal: true
		});
		$(document).on('click', "a[href$='#tab_stateset_delete']", function(event) {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
			event.preventDefault();			  	
		});
		$(document).on('click', ".tab_stateedit_repetitioninterval", function() {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
		});
	});
</script>
</head>
<body>
<h1>A</h1>
<a href="#tab_stateset_delete">aaa</a>
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>

相关文章：