Question

我在使用JQuery和JQuery UI时遇到了问题。我已经转移到最新的稳定版本，如果这是问题，但我已经确定它不是。我正在使用Chrome

当我使用我创建的对话框时，通过单击它可以正常工作而没有问题。你可以打开它并多次关闭它。

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

我无法找到相关的任何文档。任何人都可以解释行为上的差异吗？

＆＃13;

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

＆＃13;

Answer 1

您遇到focus事件的问题，该事件被调用两次（在第一次点击时，一旦关闭对话框），因此您的对话框已打开＆＃34;打开＆＃34;被触发了两次。

修复方法是在输入上使用click而不是focus。

以下是修补程序的代码段：

＆＃13;

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

＆＃13;

从输入焦点事件

1 个答案: