- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我因引用手册而受到攻击之前,我已经对此进行了相当长的一段时间的研究,并且不断陷入死胡同。甚至不知道如何正确调试它。因此,如果引用任何引用文献,请确保它们得到良好的评论和指导。这是因为我是一名 PHP/mySQL 开发人员,而 JavaScript 对象引用模型对我来说有点令人困惑(但我绝对会尽力学习!:))。
我正在尝试使用 jQuery v1.7.2 更新我的 jQuery 知识。显然,现场事件已被弃用,并已被 .on() 取代。 jQuery 文档说不要将旧的“点击”或“实时”事件与使用 .on() 的任何脚本混合。
在尝试习惯使用 on 时,我 try catch 给定 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&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() 事件的原因。另外,如果我这次要学习如何正确地做到这一点;),我不希望涉及已弃用的函数...
旧代码(有效)
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;
});
希望对某人有所帮助,这对我来说绝对是救星!
最佳答案
您的 a 元素没有哈希属性。尝试获取 href 属性并使用 javascript 的 substr 和 indexOf 函数在 #
处分割字符串var href = $(this).attr("href");
var hash = href.substr(href.indexOf("#"));
您还可以使用
$(this).prop("hash");
关于jQuery 使用 .on() 事件获取 <a> 元素的哈希值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10840257/
我是一名优秀的程序员,十分优秀!