[英]jQuery click on anchor tag reloads page
As many other threads and external forums suggest, I've tried placing e.preventDefault() (while passing e as parameter, not in code sample) in every place imaginable, but it doesn't prevent the anchor from reloading the page. 正如许多其他线程和外部论坛所建议的那样,我尝试将e.preventDefault()(在将e作为参数传递时,而不是在代码示例中传递)放置在可以想象的每个位置,但这不会阻止锚点重新加载页面。 When I step through the debugger, it will assign every div with scrollNav the click event, but when I click on the div-link it just reloads the page and the debugger does not stop on any lines in the highlightSelection function. 当我单步调试器时,它将为每个div分配scrollNav click事件,但是当我单击div链接时,它只是重新加载页面,并且调试器不会在highlightSelection函数的任何行上停止。 Another method I've tried is to use an anonymous function inside this.click and place e.preventDefault() as the first line, but it does nothing. 我尝试过的另一种方法是在this.click中使用匿名函数,并将e.preventDefault()作为第一行,但是它什么也没做。
I also don't really understand why you would want to place e.preventDefault() as so many others have suggested. 我也不太了解为什么您要放置e.preventDefault(),就像其他许多人建议的那样。 Isn't it basically saying return false? 基本上不是说return false吗? That may stop a link from reloading the page, but won't it prevent the code in the method from executing? 这可能会阻止链接重新加载页面,但是会不会阻止方法中的代码执行?
jQuery(document).ready(function() {
jQuery('.scrollNav').each(initSideNavForSelection);
}); // end ready
function initSideNavForSelection() {
this.click(highlightSelection);
}
function highlightSelection() {
var selectedDataID = this.attr("data-id");
jQuery('.scrollNav').each(function() {
if (this.attr("data-id") === selectedDataID) {
this.addClass("selected");
} else {
this.removeClass("selected");
}
})
} }
Add onclick="return false;"
添加onclick="return false;"
to the anchor. 到锚点。 OR change initSideNavForSelection
function to 或将initSideNavForSelection
函数更改为
this.click(function(e) {
e.preventDefaults();
highlightSelection();
});
either works 任一个
There are a few things I had to do to get your codes to run. 要使您的代码运行,我必须做一些事情。 You can take a link at this fiddle here . 您可以在此处进行链接。
Here's the list: 这是清单:
onclick="Event.stop(event)"
inlined attribute as Event
is undefined. 取出破碎onclick="Event.stop(event)"
内联属性作为Event
是未定义的。 this
with $(this)
in both your initSideNavForSelection()
and highlightSelection()
functions. 在initSideNavForSelection()
和initSideNavForSelection()
highlightSelection()
函数中,用$(this)
替换this
的用法。 this
represents a DOM object and $(this)
is a JQuery wrapper around this
. this
代表DOM对象,而$(this)
是围绕this
的JQuery包装器。 The latter will respond to JQuery methods like .click()
, but not the former. 后者将响应诸如.click()
类的JQuery方法,但不会响应前者。 So far, there is no page reload in your fiddle, with or without e.preventDefault()
. 到目前为止,无论是否e.preventDefault()
,您的小提琴都无法重新加载页面。
Finally, in addition to event.preventDefault()
, return false
also calls event.stopProgagation()
to prevent the event from bubbling up the DOM, before terminating the callback execution immediately. 最后,除了event.preventDefault()
, return false
还会调用event.stopProgagation()
以防止事件在立即终止回调执行之前使DOM冒泡。 A call to event.preventDefault()
doesn't terminate the function call immediately. 调用event.preventDefault()
不会立即终止函数调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.