предотвратить по умолчанию не работает для меня

Question

Я просмотрел много похожих примеров на stackoverflow и других веб-сайтах, но я не могу понять, почему my preventdefault() не работает. Может ли кто-нибудь указать мне в правильном направлении?

jQuery(document).ready(function($) { 
 

 

 
    $(function() { 
 
    $('.cshero-team-carousel-item-wrap a').on('click', function(event) { 
 
     event.preventDefault(); 
 

 
     console.log('hit'); 
 
    }); 
 
    }) 
 
});

<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 1

Вы забыли включить jQuery. Он работает, если вы включите его, и вы обязательно запустите код после загрузки HTML. Ваша консоль должна сказать:

Uncaught ReferenceError: $ is not defined

$(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 который будет слушать на элемент тела (который всегда доступен), но игнорирует щелчки, если целевое событие не соответствует селектор, переданный в.

$(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

ли вы обернуть обработчик событий в документе готовой функции? если не добавлено событие клика в ссылку, потому что ссылка не существует при запуске javascript-кода.

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