jQuery get Hash von <a> Element mit .on() Ereignis

Question

Bevor ich mit Verweisen auf Handbücher geflammt werde, habe ich dies seit einiger Zeit erforscht, und immer wieder Sackgassen. Nicht einmal sicher, wie man es richtig debuggt. Wenn Referenzen angegeben werden, stellen Sie bitte sicher, dass sie gut kommentiert und lehrreich sind. Dies liegt daran, dass ich ein PHP/mySQL-Entwickler bin und das Referenzmodell für das JavaScript-Objekt für mich etwas verwirrend ist (aber ich tue mein Bestes, um es zu lernen! :)).

Ich versuche, mein Wissen über jQuery mit jQuery v1.7.2 zu aktualisieren. Anscheinend wurde das Live-Ereignis als veraltet eingestuft und durch .on() ersetzt. Die jQuery-Dokumentation sagt, dass keine alten 'Klick'- oder' Live'-Ereignisse mit irgendwelchen Skripten mit .on() gemischt werden sollen.

Während ich versuche mich an die Verwendung von on zu gewöhnen, versuche ich den Hash einer gegebenen URL zu erfassen.

Die Seite ist wie folgt (Header bereits geladen jquery.min.1.7.2.js):

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

Das erste Alarm Feuer auf Sie auf den Button 'Event Add' Link (das einen Hash) , Relais 'Auf Wiedersehen!', dann feuert und leitet der zweite HF 'undefiniert'. Wie würde ich auf diesen Hash zugreifen?

Mein alter Code ist wie folgt, und es funktioniert, aber alle Ajax Seiten aufgerufen werden keine Ereignishandler angeschlossen, weshalb ich das Ereignis .on() verwenden. Auch, wenn ich werde lernen, wie man es tun RICHTIG diesmal;), ich will nicht, veraltete Funktionen beteiligt ...

OLD CODE (Werke)

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

Es wurde auch ein behaviour.js-Skript geladen, das im Grunde den Listener behandelte. Ich habe zu dieser Zeit überhaupt kein jQuery benutzt. Es war nett und SCHNELL (winzige .js-Dateien, kein Fremdcode), vergleichsweise, aber ich habe mein Limit erreicht, weil ich in der Lage war, effektives JavaScript zu schreiben, wenn es darum ging, ausgefallene Dinge in meinem Universum zu verarbeiten. Also muss ich das jQuery-Skript bei jedem Seitenladen laden. Da es bereits geladen ist, versuche ich, seine Funktionen zu nutzen, anstatt mehr unnötige Skripte hinzuzufügen, damit meine Seite geladen werden kann. Daher möchte ich ein Ergebnis finden, das native jQuery 1.7.2-Funktionen verwendet, um dieses Ziel zu erreichen.

ERGEBNISSE

Es stellt sich heraus, dass jQuery 1.6+ brechen kann, wenn die .attr() verwendet eine Eigenschaft eines DOM-Objekt zu finden. Also mit .prop() war der Weg zu gehen. Korrigierter Code ist wie folgt:

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

hoffe das hilft jemandem, es war definitiv ein Lebensretter für mich!

Answer 1

Ihr a-Element hat kein Hash-Attribut. versuchen, das Attribut href bekommen und die substr und indexOf Funktionen mit Hilfe von Javascript die Zeichenfolge im #

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

Sie teilen auch

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