jQuery obter hash do elemento <a> usando o evento .on ()

Question

May 31, 2012, 09:44 PM

jQuery obter hash do elemento <a> usando o evento .on ()

Antes de me inflamar com referências a manuais, venho pesquisando isso há algum tempo e continuo ficando sem saída. Nem mesmo como depurar corretamente. Portanto, se alguma referência for citada, certifique-se de que elas sejam bem comentadas e instrutivas. Isso porque eu sou um desenvolvedor PHP / mySQL, e o modelo de referência do objeto JavaScript é um pouco confuso para mim (mas definitivamente fazendo o meu melhor para aprender! :)).

Eu estou tentando atualizar meu conhecimento de jQuery usando jQuery v1.7.2. Aparentemente, o evento ao vivo foi preterido e foi substituído por .on (). Os documentos do jQuery dizem para não misturar eventos antigos 'click' ou 'live' com scripts usando .on ().

Ao tentar me acostumar a usá-lo, estou tentando capturar o hash de um determinado URL.

A página é a seguinte (o cabeçalho já carregou 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>

O primeiro alerta é acionado ao clicar no link 'Adicionar eventos' (que tem um hash), retransmite 'Adeus!' E, em seguida, o segundo manipulador é disparado e retransmite 'indefinido'. Como eu acessaria esse hash?

Meu código antigo é o seguinte, e funciona, mas qualquer página chamada ajax não terá manipuladores de eventos anexados, e é por isso que estou usando o evento .on (). Além disso, se eu vou aprender como fazê-lo corretamente desta vez;), eu não quero funções depreciadas envolvidas ...

CÓDIGO ANTIGO (obras)

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

Havia também um script behaviour.js carregado que basicamente lidava com o ouvinte. Eu não estava usando o jQuery na época. Foi legal, e RÁPIDO (minúsculos arquivos .js, sem código irrelevante), comparativamente falando, mas eu atingi meu limite de poder escrever JavaScript efetivo quando se tratava de lidar com coisas extravagantes no meu ui. Então eu tenho que carregar o script jQuery no carregamento da página de qualquer maneira. Vendo como já está carregado, estou tentando fazer uso de suas funções em vez de adicionar mais scripts desnecessários para a minha página carregar. Assim, quero encontrar um resultado que use funções nativas do jQuery 1.7.2 para atingir esse objetivo.

RESULTADOS

Acontece que o jQuery 1.6+ pode quebrar ao usar o .attr () para encontrar uma propriedade de um objeto DOM. Então, usando .prop () foi o caminho a percorrer. O código corrigido é o seguinte:

/*
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 ajude alguém, definitivamente foi um salva-vidas para mim!