jQuery lấy hàm băm của phần tử <a> bằng cách sử dụng .on() event

Question

Trước khi tôi bị flamed với tham chiếu đến các hướng dẫn sử dụng, tôi đã nghiên cứu điều này trong một thời gian, và tiếp tục nhận được kết thúc chết. Thậm chí không chắc chắn làm thế nào để gỡ lỗi nó đúng cách. Vì vậy, nếu bất kỳ tài liệu tham khảo được trích dẫn, hãy đảm bảo họ được bình luận và giảng dạy. Điều này là do tôi là một nhà phát triển PHP/mySQL và mô hình tham chiếu đối tượng JavaScript là một chút bối rối với tôi (nhưng chắc chắn là cố gắng hết sức để tìm hiểu! :)).

Tôi đang cố cập nhật kiến ​​thức về jQuery bằng cách sử dụng jQuery v1.7.2. Rõ ràng sự kiện trực tiếp đã không được chấp nhận và đã được thay thế bởi .on(). Các tài liệu jQuery nói không pha trộn các sự kiện 'click' hoặc 'live' cũ với bất kỳ script nào sử dụng .on().

Trong khi cố làm quen với việc sử dụng, tôi đang cố gắng nắm bắt giá trị băm của một url nhất định.

Các trang web là như sau (tiêu đề đã nạp 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> 

Ngọn lửa cảnh báo đầu tiên về cách nhấn vào 'Thêm Sự kiện' liên kết (trong đó có một hash) , chuyển tiếp 'Tạm biệt!', khi đó người xử lý thứ hai bắn và chuyển tiếp 'không xác định'. Làm cách nào để truy cập vào băm này?

Mã cũ của tôi như sau và mã hoạt động, nhưng mọi trang ajax được gọi sẽ không có trình xử lý sự kiện được đính kèm, đó là lý do tôi sử dụng sự kiện .on(). Ngoài ra, Nếu Tôi sẽ học cách để làm điều đó đúng thời gian này;), tôi không muốn chức năng NỮA tham gia ...

mã cũ (công trình)

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

Cũng có một kịch bản lệnh behaviour.js được tải về cơ bản để xử lý người nghe. Tôi đã không sử dụng jQuery ở tất cả tại thời điểm đó. Nó rất tuyệt, và FAST (các tệp .js nhỏ, không có mã không liên quan), tương đối nói, nhưng tôi đã đạt đến giới hạn có thể viết JavaScript hiệu quả khi nó xử lý những thứ lạ mắt trong ui của tôi. Vì vậy, tôi phải tải kịch bản jQuery tại trang tải anyways. Nhìn thấy như thế nào nó đã được nạp, tôi đang cố gắng sử dụng các chức năng của nó thay vì thêm các kịch bản không cần thiết cho trang của tôi để tải. Vì vậy, tôi muốn tìm một kết quả sử dụng các hàm jQuery 1.7.2 nguyên gốc để hoàn thành mục tiêu này.

KẾT QUẢ

Nó chỉ ra rằng jQuery 1.6 + có thể phá vỡ khi sử dụng .attr() để tìm một tài sản của một đối tượng DOM. Vì vậy, sử dụng .prop() là con đường để đi. Mã được sửa là như sau:

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

hy vọng sẽ giúp ai đó, chắc chắn đó là một phao cứu sinh cho tôi!

Answer 1

Phần tử của bạn không có thuộc tính băm. cố gắng nhận được thuộc tính href và sử dụng substr javascript và chức năng indexOf để phân chia các chuỗi tại #

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

Bạn cũng có thể sử dụng

$(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; 
});