JQuery preventDefault() не работает
У меня есть следующий код:
$(document).ready(function(){
$("div.subtab_left li.notebook a").click(function(event) {
event.preventDefault();
return false;
});
});
но когда я нажимаю элемент, он не предотвращает действие по умолчанию. Почему?
и при изменении кода на:
$(document).ready(function(){
$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});
});
он останавливает действие по умолчанию, но не предупреждает. Я не нашел ответа на jQuery-документы.
Полный код выглядит следующим образом:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
});
и структура HTML:
<div id="tabs">
<ul id="nav">
<li><a id="tab1" href="#tab-1"></a></li>
<li><a id="tab2" href="#tab-2"></a></li>
<li><a id="tab3" href="#tab-3"></a></li>
<li><a id="tab4" href="#tab-4"></a></li>
</ul>
<div class="tab" id="tab-1">
<script type="text/javascript">$(document).ready(function(){$("ul.produse li").hover(function () {
$("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});
</script>
<div class="subtab_left">
<ul>
<li class="notebook"><a href="#">1</a></li>
<li class="netbook"><a href="#">2</a></li>
<li class="allinone"><a href="#">2</a></li>
<li class="desktop"><a href="#">2</a></li>
<li class="procesoare"><a href="#">2</a></li>
<li class="placi_video"><a href="#">2</a></li>
<li class="hdd_desktop"><a href="#">2</a></li>
<li class="tv_plasma"><a href="#">2</a></li>
<li class="tv_lcd"><a href="#">2</a></li>
<li class="telefoane_mobile last_item"><a href="#">2</a></li>
</ul>
</div>
Ответы
Ответ 1
Обновление
И вот ваша проблема - вам нужно щелкнуть обработчики событий для некоторых элементов a
. В этом случае порядок, в который вы прикрепляете обработчики, имеет значение, так как они будут запущены в этом порядке.
Здесь рабочая скрипка, которая показывает поведение, которое вы хотите.
Это должен быть ваш код:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
$('#tabs ul li a').click(function(){
alert("Handling link click");
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
});
Обратите внимание, что порядок привязки обработчиков был обменен и e.stopImmediatePropagation()
используется, чтобы остановить запуск другого обработчика кликов, в то время как return false
используется для остановки поведения по умолчанию после ссылки (а также остановки барботажа события. Вы можете обнаружить, что вам нужно использовать только e.stopPropagation
).
Играйте с этим, если вы удалите e.stopImmediatePropagation()
, вы обнаружите, что после первого предупреждения будет срабатывать предупреждение второго клика. Удаление return false
не повлияет на это поведение, но приведет к тому, что браузеры будут следовать за браузером.
Примечание
Лучшее исправление может заключаться в том, чтобы селекторы возвращали совершенно разные наборы элементов, чтобы не было перекрытия, но это не всегда возможно, и в этом случае описанное выше решение может быть одним из способов рассмотрения.
-
Я не понимаю, почему ваш первый фрагмент кода не работает. Какое действие по умолчанию, которое вы видите, которое хотите остановить?
Если вы связали другие обработчики событий с ссылкой, вы должны изучить event.stopPropagation()
и event.stopImmediatePropagation()
. Обратите внимание, что return false
эквивалентно вызову как event.preventDefault
, так и event.stopPropagation()
ref
-
В вашем втором фрагменте кода e
не определен. Таким образом, ошибка будет выбрана в e.preventDefault()
, а следующие строки никогда не будут выполняться.
Другими словами
$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});
должен быть
//note the e declared in the function parameters now
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
alert("asdasdad");
return false;
});
Здесь рабочий пример, показывающий, что этот код действительно работает, и что return false
на самом деле не требуется, если вы хотите остановить по ссылке.
Ответ 2
Попробуйте следующее:
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
return false;
});
Ответ 3
Попробуйте следующее:
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
});
Ответ 4
Если вы уже тестировали действие отправки, вы заметили, что это тоже не работает.
Причина в том, что форма alread размещена в $(document).read(...
Итак, все, что вам нужно сделать, это изменить это на $(document).load(...
Теперь, в момент, когда вы загрузите страницу, он выполнит.
И будет работать; D
Ответ 5
У меня были одни и те же проблемы - я тестировал много разных вещей. но это просто не сработает.
затем я снова проверил примеры учебников на jQuery.com и узнал:
ваш jQuery script должен быть после элементов, на которые вы ссылаетесь!
поэтому ваш script должен быть после html-кода, к которому вы хотите получить доступ!
похоже, что jQuery не может получить к нему доступ в противном случае.
Ответ 6
Если e.preventDefault();
не работает, вы должны использовать e.stopImmediatePropagation();
.
Для получения дополнительной информации смотрите: В чем разница между event.stopPropagation и event.preventDefault?
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
});