jQuery get hash dell'elemento <a> utilizzando l'evento .on()

Question

Prima di essere fiammato di riferimenti ai manuali, ho fatto ricerche su questo per un po 'di tempo, e continuo a diventare un vicolo cieco. Non sono nemmeno sicuro di come eseguire il debug in modo corretto. Quindi, se vengono citati riferimenti, si prega di assicurarsi che siano ben commentati e istruttivi. Questo perché io sono uno sviluppatore PHP/mySQL e il modello di riferimento dell'oggetto JavaScript mi ​​confonde un po '(ma sicuramente faccio del mio meglio per imparare! :)).

Sto cercando di aggiornare la mia conoscenza di jQuery utilizzando jQuery v1.7.2. Apparentemente l'evento dal vivo è stato deprecato ed è stato sostituito da .on(). I documenti jQuery dicono di non fondere vecchi eventi "click" o "live" con nessuno script usando .on().

Durante il tentativo di abituarsi a utilizzare su, sto cercando di catturare l'hash di un determinato URL.

La pagina è la seguente (colpo di testa è già caricato 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> 

I primi fuochi di avviso sulla cliccando su 'Aggiungi Eventi' di collegamento (che ha un hash) , inoltra "Arrivederci!", quindi il secondo gestore spara e trasmette "indefinito". Come potrei accedere a questo hash?

Il mio vecchio codice è il seguente, e funziona, ma qualsiasi ajax chiamata pagine non avrà gestori di eventi collegati, motivo per cui sto usando l'evento .on(). Inoltre, se ho intenzione di imparare a farlo correttamente questa volta;), non voglio che funzioni deprecate coinvolti ...

vecchio codice (opere)

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

C'era anche uno script behaviour.js caricato che gestiva fondamentalmente l'ascoltatore. Non stavo usando jQuery in quel momento. E 'stato bello, e FAST (piccoli file .js, nessun codice estraneo), relativamente parlando, ma ho raggiunto il mio limite di poter scrivere JavaScript efficace quando si trattava di gestire cose stravaganti nel mio ui. Quindi devo caricare lo script jQuery al caricamento della pagina comunque. Visto come è già caricato, sto cercando di utilizzare le sue funzioni invece di aggiungere altri script inutili per caricare la mia pagina. Quindi voglio trovare un risultato che usi le funzioni native jQuery 1.7.2 per raggiungere questo obiettivo.

RISULTATI

Si scopre che jQuery 1.6 + può rompere quando si utilizza il .attr() per trovare una proprietà di un oggetto DOM. Quindi usare .prop() era la strada da percorrere. Il codice corretto è il seguente:

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

la speranza che aiuta qualcuno, è stato sicuramente un vero toccasana per me!

Answer 1

Il tuo un elemento non ha un attributo hash. provare a ottenere l'attributo href e con substr di javascript e funzioni indexOf per dividere la stringa al #

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

È inoltre possibile utilizzare

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