Antes de que me enojen con referencias a manuales, he estado investigando esto durante bastante tiempo y sigo teniendo callejones sin salida. Ni siquiera estoy seguro de cómo depurar correctamente. Entonces, si se citan referencias, asegúrese de que estén bien comentadas y sean instructivas. Esto debido a que soy un desarrollador de PHP / mySQL, y el modelo de referencia de objetos de JavaScript es un poco confuso para mí (¡pero definitivamente hago lo mejor para aprender! :)).

Estoy tratando de actualizar mi conocimiento de jQuery usando jQuery v1.7.2. Aparentemente, el evento en vivo ha sido desaprobado y ha sido reemplazado por .on (). Los documentos de jQuery dicen que no se deben combinar los eventos antiguos 'clic' o 'en vivo' con ningún script que use .on ().

Mientras trato de acostumbrarme a usar, estoy tratando de capturar el hash de una URL dada.

La página es la siguiente (el encabezado ya ha cargado 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>

La primera alerta se dispara al hacer clic en el enlace 'Agregar eventos' (que tiene un hash), los relés '¡Adiós!', Luego el segundo controlador se dispara y los relés 'indefinidos'. ¿Cómo accedo a este hash?

Mi código anterior es el siguiente, y funciona, pero cualquier página llamada ajax no tendrá adjuntos controladores de eventos, por lo que estoy usando el evento .on (). Además, si voy a aprender cómo hacerlo CORRECTAMENTE esta vez;), no quiero que se impliquen funciones en desuso ...

CÓDIGO ANTIGUO (funciona)

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

También hubo una secuencia de comandos behaviour.js cargada que básicamente manejaba al oyente. No estaba usando jQuery en ese momento. Fue agradable, y FAST (archivos .js pequeños, sin código extraño), comparativamente hablando, pero llegué a mi límite de poder escribir JavaScript eficaz cuando se trataba de manejar cosas elegantes en mi interfaz de usuario. Así que tengo que cargar el script jQuery en la carga de la página de todos modos. Viendo cómo ya está cargado, estoy tratando de usar sus funciones en lugar de agregar más scripts innecesarios para que mi página se cargue. Por lo tanto, quiero encontrar un resultado que use las funciones nativas de jQuery 1.7.2 para lograr este objetivo.

RESULTADOS

Resulta que jQuery 1.6+ se puede romper al usar el .attr () para encontrar una propiedad de un objeto DOM. Así que usar .prop () era el camino a seguir. El código corregido es el siguiente:

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

Espero que ayude a alguien, definitivamente fue un salvavidas para mí!