Zanim zacznę płonąć odniesieniami do podręczników, badam to od dłuższego czasu i wciąż otrzymuję ślepe uliczki. Nawet nie wiesz, jak poprawnie go debugować. Jeśli więc cytuje się jakieś odniesienia, upewnij się, że są dobrze skomentowane i pouczające. To ze względu na to, że jestem programistą PHP / mySQL, a model referencyjny obiektu JavaScript jest dla mnie nieco mylący (ale zdecydowanie staram się uczyć! :)).

Próbuję zaktualizować moją wiedzę o jQuery za pomocą jQuery v1.7.2. Najwyraźniej zdarzenie na żywo zostało uznane za przestarzałe i zostało zastąpione przez .on (). Dokumenty jQuery mówią, by nie mieszać starych zdarzeń „kliknij” lub „na żywo” ze skryptami używającymi .on ().

Próbując przyzwyczaić się do używania, próbuję przechwycić skrót danego adresu URL.

Strona jest następująca (nagłówek już załadował 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>

Pierwszy alert uruchamia się po kliknięciu łącza „Dodaj zdarzenia” (który zawiera skrót), przekazuje „Żegnaj!”, A następnie drugi przewodnik wystrzeliwuje i przekazuje „niezdefiniowane”. Jak uzyskać dostęp do tego skrótu?

Mój stary kod działa w następujący sposób i działa, ale wszystkie wywołane przez ajax strony nie mają dołączonych procedur obsługi zdarzeń, dlatego używam zdarzenia .on (). Poza tym, jeśli tym razem nauczę się, jak to robić PRAWIDŁOWO;), nie chcę, aby zaangażowane były przestarzałe funkcje ...

STARY KOD (działa)

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

Załadowano także skrypt behawiorowy.js, który zasadniczo obsługiwał słuchacza. W tamtym czasie nie korzystałem w ogóle z jQuery. Było miło i FAST (małe pliki .js, bez obcego kodu), stosunkowo mówiąc, ale osiągnąłem limit możliwości pisania efektywnego JavaScript, jeśli chodzi o obsługę fantazyjnych rzeczy w moim interfejsie użytkownika. Więc i tak muszę załadować skrypt jQuery przy ładowaniu strony. Widząc, jak już jest załadowany, próbuję wykorzystać jego funkcje, zamiast dodawać więcej niepotrzebnych skryptów do załadowania mojej strony. Dlatego chcę znaleźć wynik, który wykorzystuje natywne funkcje jQuery 1.7.2 do osiągnięcia tego celu.

WYNIKI

Okazuje się, że jQuery 1.6+ może się zepsuć podczas używania .attr () do znalezienia właściwości obiektu DOM. Tak więc użycie .prop () było dobrym rozwiązaniem. Poprawiony kod jest następujący:

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

mam nadzieję, że ktoś komuś pomaga, na pewno był dla mnie ratownikiem!