JQuery получить хэш <a>элемента с помощью события .on ()</a>

Прежде чем я разгорячился со ссылками на руководства, я довольно долго изучал это и продолжаю тупиковать. Даже не уверен, как правильно его отладить. Так что, если какие-либо ссылки цитируются, пожалуйста, убедитесь, что они хорошо прокомментированы и обучающие. Это из-за того, что я являюсь разработчиком PHP / mySQL, и эталонная модель объектов JavaScript меня немного смущает (но, безусловно, я стараюсь учиться! :)).

Я пытаюсь обновить свои знания jQuery, используя jQuery v1.7.2. По-видимому, прямая трансляция устарела и была заменена на .on (). В документах jQuery говорится, что не нужно смешивать старые «нажмите». или «в прямом эфире»; события с любыми сценариями, использующими .on ().

Пытаясь привыкнуть к использованию, я пытаюсь захватить хэш данного URL.

Страница выглядит следующим образом (заголовок уже загрузил 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>

Первое предупреждение срабатывает при нажатии кнопки «Добавить события». link (который имеет хэш), реле «Goodbye!», затем запускается второй обработчик и реле «undefined». Как бы я получить доступ к этому хешу?

Мой старый код выглядит следующим образом, и он работает, но любой ajax, называемый страницей, не имеет прикрепленных обработчиков событий, поэтому я использую событие .on (). Кроме того, если на этот раз я собираюсь научиться делать это НЕПРАВИЛЬНО;), я не хочу, чтобы в них были включены устаревшие функции ...

OLD CODE(works)

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

Был также загружен сценарий поведения, который в основном обрабатывал слушателя. В то время я вообще не использовал jQuery. Это было неплохо, и FAST (крошечные файлы .js, без постороннего кода), сравнительно говоря, но я достиг предела своей способности писать эффективный JavaScript, когда дело дошло до обработки фантастических вещей в моем пользовательском интерфейсе. Так что я все равно должен загрузить скрипт jQuery при загрузке страницы. Видя, как он уже загружен, я пытаюсь использовать его функции вместо добавления дополнительных ненужных сценариев для загрузки моей страницы. Таким образом, я хочу найти результат, который использует нативные функции jQuery 1.7.2 для достижения этой цели.

RESULTS

Оказывается, что jQuery 1.6+ может сломаться при использовании .attr (), чтобы найти свойство объекта DOM. Так что использование .prop () - это путь. Исправленный код выглядит следующим образом:

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

надеюсь, что это поможет кому-то, это определенно было спасением для меня!

Ответы на вопрос(2)

Ваш ответ на вопрос