0

在改编自Call php function from javascript的代码中，每当我将鼠标悬停在链接上时，我想进行 Ajax 调用以运行 PHP 脚本，并传入一个 cookie，以便 PHP 脚本可以使用标识符在 MySQL 中查找内容。它正在工作，我第一次运行该页面。但是，在那之后，无论我将鼠标放在哪个链接上，它都认为事件的目标是第一个链接。

<ul>
 <li><a href="mypage.html?eventID=1" class="1">Event 1</a></li>
 <li><a href="mypage.html?eventID=2" class="2">Event 2</a></li>
 <li><a href="mypage.html?eventID=3" class="3">Event 3</a></li>
</ul>
<div id="modalMask">
    <div id="modalContent">
        Loading...
    </div>
</div>
<script src="ajaxRequest.js" type="text/javascript"></script>
<span id="output"></span>

使用链接的功能在这里：

function getOutput() 
{
  if (typeof e == 'undefined') e = window.event //we always do this in event handler, to make IE work
  var target = e.target || e.srcElement; //Another IE hack, so we can get the element the event relates to
  var ID = target.className;

  document.getElementById('output').innerHTML = ID; 
  var ajax = getRequest();
  ajax.onreadystatechange = function(){
      if(ajax.readyState == 4){
        document.getElementById('modalContent').innerHTML = 
             ajax.responseText + '<br><input type="button" onclick = "closeModalPopupWindow()" id="closeModal" value="Close">';
      }
  }
  ajax.open("GET", "do_query.php?eventID="+ID, true);
  ajax.send(null);
}

这在 jsFiddle 上进行了演示：http: //jsfiddle.net/briggs_w/BWbuX/1/。Ajax 调用已被注释掉，但我放入了一个片段

  var ID = target.className;  
  document.getElementById('output').innerHTML = ID;

这样我就可以看到链接的类名。控制台调试器验证：它总是在页面加载后我首先将鼠标悬停在哪个链接上。

4

1 回答 1

0

好吧，似乎主要问题出在您的 CSS 上。当触发鼠标悬停事件时，将显示 modalMask 元素。然而，问题是您将它放在其他所有内容之上：

position: absolute;
...
width: 100%;
height: 100%;
...
z-index: 1000;

这意味着您有一个不可见的层阻止了对链接的访问，这就是为什么在第一个事件之后没有反应的原因。

在进行故障排除时，我在以下位置为您清理了代码：http: //jsfiddle.net/Z4ZGZ/18/

“关闭”按钮在小提琴中不起作用，但是当我在正文元素的底部包含脚本文件时，它在本地对我有用。

于 2013-04-09T23:01:11.600 回答