从输入焦点事件启动时，JQuery UI 对话框未关闭答案

【问题标题】：JQuery UI Dialog not closing when launched from Input focus event从输入焦点事件启动时，JQuery UI 对话框未关闭
【发布时间】：2016-08-31 21:03:39
【问题描述】：

我在使用 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>

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

您遇到了focus 事件的问题，该事件被调用了两次（在第一次单击时，以及在对话框关闭后），因此您的对话框的“打开”被触发了两次。

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

这是你的 sn-p 修复：

<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>

【讨论】：