元素的散列在我引用手冊引用之前,我一直在研究這個問題很長一段時間,並且一直在死路一條。甚至不知道如何正確調試它。因此,如果引用了任何參考文獻,請確保它們有充分的評論和指導。這是由於我是一名PHP/mySQL開發人員,而JavaScript對象參考模型對我來說有點困惑(但絕對是盡我所能去學!:))。jQuery獲得使用.on()事件
我想用jQuery v1.7.2更新我對jQuery的知識。顯然,直播活動已被棄用,並已被替換爲.on()。 jQuery文檔說,不要將舊的'click'或'live'事件與任何使用.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&d=AJAXcontent&i=1&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&d=AJAXcontent&i=1&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()事件。另外,如果我要學習如何做正確這段時間),我不想參與廢棄的函數...
OLD CODE(作品)
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);
還有一個基本上處理偵聽器的加載的behaviour.js腳本。那時我沒有使用jQuery。相對來說,這很好,而FAST(tiny .js文件,沒有額外的代碼),但當我處理我的UI中的奇特事物時,我達到了能夠編寫有效JavaScript的限制。所以我不得不在加載頁面時加載jQuery腳本。看到它是如何加載的,我試圖利用它的功能,而不是添加更多不必要的腳本來加載我的頁面。因此,我想找到一個使用原生jQuery 1.7.2函數來實現此目標的結果。
成績
事實證明,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;
});
希望能幫助某人,絕對是救命的人!
完美!我使用了$(this).prop(「hash」)方法,它完美地工作,我會爲其他用戶發佈我的更新代碼。通過閱讀這裏找到的優秀答案,我學到了很多東西...... http://stackoverflow.com/a/5876747/1179592 – MaurerPower
但還有一個問題。關於哈希的屬性。我知道獲取各種DOM對象的屬性(例如複選框),有一個獨特的屬性和屬性,但我不明白哈希是有價值的。它不是一個DOM對象嗎?這只是一個字符串中的字符而已?現在使用Google搜索...如果您對此處有任何建議,我也很想看到它!太棒了! – MaurerPower