jQuery 使用 .on() 事件获取 <a> 元素的哈希值

Question

在我对手册的引用感到愤怒之前，我已经研究了很长一段时间，并且一直走入死胡同。甚至不确定如何正确调试它。因此，如果引用了任何参考文献，请确保它们得到很好的评论和指导。这是因为我是一名 PHP/mySQL 开发人员，而 JavaScript 对象参考模型对我来说有点混乱（但肯定会尽力学习！:)）。

我正在尝试使用 jQuery v1.7.2 更新我的 jQuery 知识。显然，现场活动已被弃用，并已被 .on() 取代。 jQuery 文档说不要将旧的“点击”或“实时”事件与任何使用 .on() 的脚本混合。

在尝试习惯使用 on 时，我正在尝试捕获给定 url 的哈希值。

页面如下（header已经加载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>

第一个警报在单击“添加事件”链接（有一个哈希）时触发，中继“再见！”，然后第二个处理程序触发并中继“未定义”。我将如何访问此哈希？

我的旧代码如下，它可以工作，但是任何称为页面的 ajax 都不会附加事件处理程序，这就是我使用 .on() 事件的原因。另外，如果我这次要学习如何正确地做到这一点;)，我不希望涉及已弃用的功能......

旧代码（有效）

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

还加载了一个 behavior.js 脚本，它基本上处理了侦听器。那时我根本没有使用 jQuery。相对来说，它很好，而且速度很快（很小的 .js 文件，没有多余的代码），但是在我的 ui 中处理花哨的东西时，我达到了能够编写有效 JavaScript 的极限。所以无论如何我必须在页面加载时加载 jQuery 脚本。看到它是如何加载的，我试图利用它的功能，而不是为我的页面添加更多不必要的脚本来加载。因此我想找到一个使用原生 jQuery 1.7.2 函数来实现这个目标的结果。

结果

事实证明，当使用 .attr() 查找 DOM 对象的属性时，jQuery 1.6+ 可能会中断。所以使用 .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;   
}); 

希望对某人有所帮助，这绝对是我的救命稻草！

Answer 1

您的 a 元素没有 hash 属性。尝试获取 href 属性并使用 javascript 的 substr 和 indexOf 函数在 #

处拆分字符串

var href = $(this).attr("href");
var hash = href.substr(href.indexOf("#"));

你也可以使用

$(this).prop("hash");

Answer 2

$('a.js-hash').click(function() {

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 1000, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
    });

    // Prevent default anchor click behavior
    return false;
});