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);
}

これは、http: //jsfiddle.net/briggs_w/BWbuX/1/の jsFiddle で実証されています 。Ajax 呼び出しはコメントアウトされていますが、スニペットを挿入しました

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

リンクのclassNameが見えるように。コンソール デバッガーが検証します。それは常に、ページの読み込み後に最初にマウスオーバーしたリンクです。

4

1 に答える 1

0

主な問題はCSSにあったようです。マウスオーバー イベントがトリガーされると、modalMask 要素が表示されました。ただし、問題は、次のように他のすべての上に配置したことです。

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

これは、リンクへのアクセスをブロックする目に見えないレイヤーがあったことを意味し、それが最初のイベントの後に反応がなかった理由です。

トラブルシューティング中に、http: //jsfiddle.net/Z4ZGZ/18/でコードをクリーンアップしました。

「閉じる」ボタンはフィドルでは機能しませんが、body 要素の下部にスクリプト ファイルを含めると、ローカルで機能しました。

于 2013-04-09T23:01:11.600 に答える