jQuery() घटना .on का उपयोग कर <a> तत्व के हैश मिल

Question

इससे पहले कि मैं मैनुअल के संदर्भ के साथ flamed हो, मैं पिछले कुछ समय से इस पर शोध किया गया है, और मृत समाप्त होता है मिलती रहती है। यह भी सुनिश्चित नहीं है कि इसे ठीक से कैसे डिबग करें। तो यदि कोई संदर्भ उद्धृत किया गया है, तो कृपया सुनिश्चित करें कि वे अच्छी तरह से टिप्पणी और निर्देशक हैं। यह मेरे लिए एक PHP/mySQL डेवलपर होने के कारण, और जावास्क्रिप्ट ऑब्जेक्ट संदर्भ मॉडल मेरे लिए थोड़ा उलझन में है (लेकिन निश्चित रूप से सीखने के लिए मेरी पूरी कोशिश कर रहा है! :))।

मैं jQuery v1.7.2 का उपयोग कर jQuery की मेरी जानकारी अद्यतन करने के लिए कोशिश कर रहा हूँ। स्पष्ट रूप से लाइव इवेंट को बहिष्कृत कर दिया गया है, और इसे .on() द्वारा प्रतिस्थापित किया गया है। JQuery दस्तावेज़ों का कहना है कि .on() का उपयोग कर किसी भी स्क्रिप्ट के साथ पुराने 'क्लिक' या 'लाइव' ईवेंट को मिश्रित न करें।

पर उपयोग करने के लिए इस्तेमाल करने के लिए प्रयास करते समय, मैं किसी दिए गए यूआरएल के हैश पर कब्जा करने की कोशिश कर रहा हूँ।

पेज के रूप में निम्नानुसार (हेडर पहले ही 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); 

एक व्यवहार.जेएस स्क्रिप्ट भी लोड किया गया था जो मूल रूप से श्रोता को संभाला जाता था। मैं उस समय jQuery का उपयोग नहीं कर रहा था। यह अच्छा था, और तेज़ (छोटा .js फ़ाइलें, कोई बाहरी कोड नहीं), तुलनात्मक रूप से बोल रहा था, लेकिन जब मैंने अपने यूई में फैंसी चीजों को संभालने के लिए प्रभावी जावास्क्रिप्ट लिखने में सक्षम होने की मेरी सीमा को मारा। तो मुझे किसी भी तरह से पेज लोड पर jQuery स्क्रिप्ट लोड करना होगा। यह देखकर कि यह पहले से लोड हो चुका है, मैं अपने पृष्ठ को लोड करने के लिए और अधिक अनइनेसरी स्क्रिप्ट जोड़ने की बजाय इसके कार्यों का उपयोग करने की कोशिश कर रहा हूं। इस प्रकार मैं एक परिणाम खोजना चाहता हूं जो इस लक्ष्य को पूरा करने के लिए मूल jQuery 1.7.2 फ़ंक्शंस का उपयोग करता है।

परिणाम

ऐसा लगता है कि jQuery 1.6+ जब .attr() का उपयोग कर एक डोम वस्तु की एक संपत्ति खोजने के लिए तोड़ सकते हैं। तो .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; 
}); 

उम्मीद है कि किसी की मदद करता है, यह निश्चित रूप से मेरे लिए एक lifesaver था!

Answer 1

आपका एक तत्व एक हैश विशेषता नहीं है। href विशेषता रही है और जावास्क्रिप्ट के 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; 
});