Bevor ich mit Hinweisen auf Handbücher in Flammen auftauche, habe ich lange nachgeforscht und bin in Sackgassen geraten. Ich weiß nicht einmal, wie ich es richtig debuggen soll. Wenn also Referenzen zitiert werden, stellen Sie bitte sicher, dass diese gut kommentiert und instruktiv sind. Dies ist darauf zurückzuführen, dass ich PHP / mySQL-Entwickler bin und das JavaScript-Objektreferenzmodell für mich etwas verwirrend ist (aber ich gebe definitiv mein Bestes, um zu lernen! :)).

Ich versuche, mein Wissen über jQuery mit jQuery 1.7.2 zu aktualisieren. Anscheinend ist das Live-Event veraltet und wurde durch .on () ersetzt. In den jQuery-Dokumenten wird angegeben, dass alte "Klick" - oder "Live" -Ereignisse nicht mit Skripten kombiniert werden sollen, die .on () verwenden.

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

Die Seite sieht wie folgt aus (Header hat jquery.min.1.7.2.js bereits geladen):

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

Die erste Warnung wird ausgelöst, wenn Sie auf den Link "Ereignisse hinzufügen" klicken (der einen Hash enthält), "Auf Wiedersehen!" Weiterleiten und der zweite Handler "undefiniert" weiterleiten. Wie würde ich auf diesen Hash zugreifen?

Mein alter Code lautet wie folgt und funktioniert, aber an Ajax-Seiten werden keine Ereignishandler angehängt, weshalb ich das Ereignis .on () verwende. Auch wenn ich diesmal lernen will, wie man es RICHTIG macht;), möchte ich nicht, dass veraltete Funktionen involviert sind ...

ALTER CODE (funktioniert)

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 genommen den Listener handhabte. Ich habe damals überhaupt nicht mit jQuery gearbeitet. Es war nett und vergleichsweise SCHNELL (winzige .js-Dateien, kein fremder Code), aber ich stieß an meine Grenzen, in der Lage zu sein, effektives JavaScript zu schreiben, wenn es darum ging, ausgefallene Dinge in meiner Benutzeroberfläche zu handhaben. Also muss ich das jQuery-Skript sowieso beim Laden der Seite laden. Angesichts dessen, wie es bereits geladen ist, versuche ich, seine Funktionen zu nutzen, anstatt weitere nicht benötigte Skripte für das Laden meiner Seite hinzuzufügen. 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+ bei der Verwendung von .attr () zum Auffinden einer Eigenschaft eines DOM-Objekts einen Fehler verursachen kann. Also war die Verwendung von .prop () der richtige Weg. Der korrigierte Code lautet 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!