【问题标题】:Javascript Prevent Default Not WorkingJavascript防止默认不工作
【发布时间】:2014-02-24 00:36:06
【问题描述】:

我知道有很多关于 preventDefault() 不起作用的帖子,但我去了那些帖子并没有得到任何结果。

我所做的只是捕捉一个点击事件,然后从响应中附加 html,但 preventDefault() 并没有阻止页面重新加载,我很困惑为什么。

这是我的 HTML:

<div class="slide_pane"> 
 <div class="profile_content"></div>

 <div class="account_bottom_bar">
  <ul class="bottom_bar_list">
    <a href="/profiles/load" class="sidebar_link">
      <li>
        <p>Content</p>
      </li>
    </a>
  </ul>
 </div>

这是我的 JS:

$(document).scroll(function() {
 ajaxView();
});

var ajaxView = function() {
 $('.sidebar_link').click(function(e) {
 e.preventDefault();
 $.ajax ({
  type: 'GET',
  url: $(this).attr("href")

  }).done(function(resp) {
   $('.profile_content').append(resp);
  });
 });
};

但是当我点击那个动作时,它只是从新屏幕的响应中加载 HTML。

有什么想法吗??谢谢!

【问题讨论】:

  • 您的示例中的.sidebar_link 元素在哪里?每当用户滚动页面时,您似乎都在向该元素添加一个新的事件处理程序,这真的很糟糕。
  • jQuery anchor preventDefault 的可能重复项
  • 对不起菲利克斯克林。刚刚编辑它...它在链接上
  • 一个潜在的问题可能是您的 HTML 无效。只有li 元素是ul 元素的有效子元素。将链接移入 li 元素。但除此之外,您的代码似乎可以工作,至少在 Firfox 中:jsfiddle.net/nAS3S.

标签: javascript jquery preventdefault


【解决方案1】:

没有任何反应,因为您的 HTML 中没有 sidebar_link。

event.preventDefault() 的使用示例:

$(document).ready(function() {
    $(".sidebar_link").click(function(event) {
        event.preventDefault();
        $(this).css("color", "red");
    });   
});

这是一个如何在链接上使用 event.preventDefault() 的示例:http://jsfiddle.net/LUKVT/

【讨论】:

  • 我正在使用您的代码,但它不会在此处重新加载:jsfiddle.net/y4FRr我错过了什么吗?
  • 所以我刚刚注意到我使用的是 document.scroll 而不是 .ready :P 但奇怪的是,当我启动 chrome 检查器并点击该操作时,它不会重新加载,但是当我没有启动检查器,它会重新加载......不要真正理解那部分
  • @user3029619:可能打开检查器触发了滚动事件。
  • 很公平 - 我对 onScroll 事件持怀疑态度 :))