Question

我已经在stackoverflow和其他网站上查看了很多类似的例子，但我似乎无法弄清楚为什么我的preventdefault（）无效。有人能指出我正确的方向吗？

＆＃13;

jQuery(document).ready(function($) {


  $(function() {
    $('.cshero-team-carousel-item-wrap a').on('click', function(event) {
      event.preventDefault();

      console.log('hit');
    });
  })
});

＆＃13;

<div class="cshero-team-title-wrap">
  <h3 class="cshero-team-title">
                <a style="color:#005780;" title="world" href="http://google.com" rel="">world</a>
            </h3>
</div>

＆＃13;

Answer 1

您忘了加入jQuery。它包含它并且确保在加载HTML后运行代码。你的控制台应该说：

未捕获的ReferenceError：$未定义

$(function() {
  $('.cshero-team-title a').click(function(event) {
    event.preventDefault();
    console.log('hit');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cshero-team-title-wrap">
  <h3 class="cshero-team-title">
    <a style="color:#005780;" title="World" href="http://google.com" rel="">World</a>
  </h3>
</div>

或者，you can use delegation将侦听body元素（始终可用），但忽略点击次数，除非事件目标与传入的选择器匹配。

$(document.body).click('.cshero-team-title a', function(event) {
   event.preventDefault();
   console.log('hit');
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cshero-team-title-wrap">
  <h3 class="cshero-team-title">
    <a style="color:#005780;" title="World" href="http://google.com" rel="">World</a>
  </h3>
</div>

在发布问题之前，您应该始终进行一些调试。这包括：

检查控制台是否有错误
在代码中添加断点并观察其运行

Answer 2

您是否将事件处理程序包装在文档就绪函数中？如果不是，则不会将click事件添加到链接，因为在运行javascript代码时链接不存在。

$(function(){
    $('.cshero-team-title a').click(function(event) {
        event.preventDefault();
        console.log('hit');
    });
});

防止默认对我不起作用

2 个答案: