Question

我知道，这个问题已经在236个变种中已经出现了。但即使我尝试使用我理解的那些，我的脚本也没有得到正确的行为。我有以下代码（HTML和JS）：

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
      $(function() {
        var dialog, form
        dialog = $('div#infoDialog').dialog({
          autoOpen: false,
          height: 600,
          width: 500,
          modal: true
        });
        $('#showInfos').click(function(e) {
          e.preventDefault();
          dialog.dialog('open');
        });
      });
    </script>
  </head>

  <body>
    <div id="infoDialog" title="Eventinfos">
      Testeintrag
    </div>
    <button id="showInfos"><img src="images/apoa.gif" /></button>
    <a href="javascript: void(0)" id="showInfos"><img src="images/apoa.gif" /></a>
  </body>
</html>

按钮按预期正常工作，但“a href ...”根本不起作用。我已经尝试了所有我能想到的替代方案，比如不要使用img或尝试＃而不是javascript: void(0)或者不使用变量对话框，但总是直接命名，但都没有用。
在示例中几乎相同的代码应该工作正常。我做错了什么？

Answer 1

我认为问题在于＆＃34;按钮＆＃34;正在使用相同的ID。要么更改其中一个的ID，要么将它们都切换为使用类（或其他一些选择器）。

ID必须是唯一的。

＆＃13;

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<title>jQuery UI Dialog - Modal form</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script type="text/javascript">
			$(function() {
				var dialog, form
				dialog = $('div#infoDialog').dialog({
					autoOpen: false,
					height: 600,
					width: 500,
					modal: true
				});
				$('.showInfos').click(function(e){
					e.preventDefault();
					dialog.dialog('open');
				});
			});
		</script>
	</head>
	<body>
		<div id="infoDialog" title="Eventinfos">
			Testeintrag
		</div>
		<button class="showInfos"><img src="images/apoa.gif" /></button>
		<a href="javascript: void(0)" class="showInfos"><img src="images/apoa.gif" /></a>
	</body>
</html>

＆＃13;

Answer 2

使用class="showInfos"代替id="showInfos"和js

$('.showInfos').click(function(e) {
  e.preventDefault();
  dialog.dialog('open');
});

找到jsbin here

使用JavaScript打开模态对话框onClick不起作用

2 个答案: