jQueryは、.on（）イベントを使用して<a>要素のハッシュを取得します。

Question

マニュアルへの参照が盛り込まれる前に、私はかなり長い間これを研究していました。それを正しくデバッグする方法さえ知らない。したがって、引用が引用されている場合は、それらのコメントと説明が十分であることを確認してください。これは私がPHP/mySQLの開発者であり、JavaScriptのオブジェクト参照モデルが少し混乱しています（しかし、勉強するのは間違いありません:)）。

私はjQueryの知識をjQuery v1.7.2を使用して更新しようとしています。明らかに、ライブイベントは廃止され、.on（）に置き換えられました。 jQueryのドキュメントでは、古い 'クリック'イベントや 'live'イベントを.on（）を使ってスクリプトとブレンドしないようにしています。

オンを使用するのに慣れようとしている間、私は与えられたURLのハッシュを捕まえようとしています。

<div id='menuHolder' style="position:relative; margin-left:50px;margin-bottom:30px; padding-top:35px; min-width:600px;z-index:998;"> 
     <ul id="menu"> 
     <li><a href="#">Events</a> 
      <ul id="events"> 
       <li> 
        <img class="corner_inset_left" alt="" src="images/menu/corner_inset_left.png"/> 
        <a id="linker21 menu" class="test AJAXcaller" href="index.php#?p=1&amp;d=AJAXcontent&i=1&amp;k=<?=$_SESSION['authcpanel']['key']?>" rel="nofollow">Upcoming Events</a> 
        <img class="corner_inset_right" alt="" src="images/menu/corner_inset_right.png"/> 
       </li> 
       <li><a href="#">List All Events</a></li> 
       <li><a id="linkermenu" class="test AJAXcaller" href="index.php#?p=24&amp;d=AJAXcontent&i=1&amp;k=<?=$_SESSION['authcpanel']['key']?>" rel="nofollow">Add Events</a></li> 
       <li class="last"> 
        <img class="corner_left" alt="" src="images/menu/corner_left.png"/> 
        <img class="middle" alt="" src="images/menu/dot.gif"/> 
        <img class="corner_right" alt="" src="images/menu/corner_right.png"/> 
       </li> 
      </ul> 
     </li> 
     </ul> 
    </div> 

<script> 
    $(document).on("click", "a.AJAXcaller", function(){ 
     alert("Goodbye!"); 
     alert($(this).attr("hash")); 
    }); 
</script> 

（ハッシュを持っている）「追加イベント」リンクをクリックすることで最初の警告火災は：（ヘッダがすでにjquery.min.1.7.2.jsをロードした）次のように

ページです、 'Goodbye！'をリレーすると、2番目のハンドラが起動し、 'undefined'をリレーします。このハッシュにどのようにアクセスすればよいですか？

私の古いコードは以下の通りですが、動作しますが、ページと呼ばれるすべてのajaxにはイベントハンドラが添付されていないため、.on（）イベントを使用しています。私は適切にこの時間をそれを行う方法を学ぶつもりだ場合はまた、;）、私は非推奨の機能が関与したくない...

OLD CODE（作品）

var linkClickAction = { 
     'a.AJAXcaller' : function(element){ 
      element.onclick = function(){ 
       var locationString = $(this).attr("hash"); 
       locationString = locationString.replace(/.*\#(.*)/, "$1") 
      var parameterString = locationString.replace(/.*\?(.*)/, "$1"); // onclick="sndReq('j=1&q=2&t=127.0.0.1&c=5'); 

      var parameterTokens = parameterString.split("&"); // onclick="sndReq('j=1,q=2,t=127.0.0.1,c=5'); 
      var parameterList = new Array(); 
      for (j = 0; j < parameterTokens.length; j++) { 
       var parameterName = parameterTokens[j].replace(/(.*)=.*/, "$1"); // j 
       var parameterValue = parameterTokens[j].replace(/.*=(.*)/, "$1"); // 1 
       parameterList[parameterName] = parameterValue; 
      } 
      var page = parameterList['p']; 
      var key = parameterList['k']; 
      var includesDir = parameterList['i']; 
      var changeDiv = parameterList['d']; 

      sndReq(page,key,includesDir,changeDiv,parameterString); 
      return false;  
      } 
     } 

    }; 
Behaviour.register(linkClickAction); 

基本的にリスナを処理するbehaviour.jsスクリプトもロードされていました。私はその時点でjQueryを使用していませんでした。それはいいですし、FAST（小さな.jsファイル、無関係なコードはありません）、比較的話していましたが、自分のUI内の派手なものを扱うときにJavaScriptを書くことができるという限界に突き当った。だから私はページの読み込み時にjQueryスクリプトをロードしなければならない。既にロードされている方法を見て、ロードするページの不必要なスクリプトを追加するのではなく、その機能を利用しようとしています。したがって、私は、この目的を達成するために、ネイティブのjQuery 1.7.2関数を使用する結果を探したいと思います。

結果

これは、DOMオブジェクトのプロパティを見つけるために）（.ATTRを使用するときにjQuery 1.6+を破ることができることが判明しました。だから、.prop（）を使うことがやり方でした。修正されたコードは次のとおりです。

/* 
Page:   rating.js 
Created:  Aug 2006 
Last Mod:  May 30, 2012 
Modder:   Darren Maurer 
*/ 

    function sndReq(page,key,includesDir,changeDiv,parameterString) { 
     var divToChange = document.getElementById(changeDiv); // the Div that the data will be put into 

     // switch Div with a loading div 
     divToChange.innerHTML = '<div class="loading"><img src="images/loading.gif" title="Saskatoon.CityGuru.ca - Loading Page" alt="Saskatoon.CityGuru.ca - Loading Page" border="0"/></div>'; 

     if (includesDir == 1){ 
      //Find Current Working Directory. Use to find path to call other files from 
      /*var myloc = window.location.href; 
      var locarray = myloc.split("/"); 
      delete locarray[(locarray.length-1)]; 
      var arraytext = locarray.join("/"); 
      */ 
      $.ajax({ 
       type: "POST", 
       url: "AJAXCaller.php", 
       data: parameterString, 
       success: function(msg){ 
        $('#'+changeDiv).html(msg); 
       } 
      }); 
     } 
    } 

/* =======END AJAX FUNCTIONS================= */ 

/* =======BEGIN CLICK LISTENER FUNCTIONS================= */ 
/* Listens to any a href link that has a class containing ' AJAXcaller' */ 
/* ie. <a id="link1" class="test AJAXcaller" href="index.php#http://233.help?id=22&think=33" rel="nofollow">> AJAX TEST LINK <</a> */ 
$(document).on("click", "a.AJAXcaller", function(){ 
    alert($(this).prop("hash")); 
      var locationString = $(this).prop("hash"); 
      locationString = locationString.replace(/.*\#(.*)/, "$1") 
      var parameterString = locationString.replace(/.*\?(.*)/, "$1"); // onclick="sndReq('j=1&q=2&t=127.0.0.1&c=5'); 

      var parameterTokens = parameterString.split("&"); // onclick="sndReq('j=1,q=2,t=127.0.0.1,c=5'); 
      var parameterList = new Array(); 
      for (j = 0; j < parameterTokens.length; j++) { 
       var parameterName = parameterTokens[j].replace(/(.*)=.*/, "$1"); // j 
       var parameterValue = parameterTokens[j].replace(/.*=(.*)/, "$1"); // 1 
       parameterList[parameterName] = parameterValue; 
      } 
      var page = parameterList['p']; 
      var key = parameterList['k']; 
      var includesDir = parameterList['i']; 
      var changeDiv = parameterList['d']; 
      sndReq(page,key,includesDir,changeDiv,parameterString); 
      return false; 
}); 

私を救うのは間違いなく助かりました！

Answer 1

あなたのa要素にはハッシュ属性がありません。 href属性を取得し、＃

var href = $(this).attr("href"); 
var hash = href.substr(href.indexOf("#")); 

で文字列を分割するためにはJavaScriptのSUBSTRとのindexOfの機能を使用してみてくださいまた

$(this).prop("hash"); 

Answer 2

$('a.js-hash').click(function() { 

    // Store hash 
    var hash = this.hash; 

    // Using jQuery's animate() method to add smooth page scroll 
    $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
    }, 1000, function() { 

     // Add hash (#) to URL when done scrolling (default click behavior) 
     window.location.hash = hash; 
    }); 

    // Prevent default anchor click behavior 
    return false; 
});