Предотвращение запуска нескольких событий JQuery
Здесь сценарий, мой контент загружается асинхронно на основе класса. Поэтому, если у меня есть ссылка с классом ajaxLink, она срабатывает, как показано ниже:
$('a.ajaxLink').click(function (e) {
e.preventDefault();
var container = $(this).parents('div.fullBottomContent');
var href = $(this).attr('href');
container.fadeOut('fast', function () {
$.ajax({
url: href,
dataType: "html",
type: "GET",
success: function (data) {
container.html(data);
BindEventHandlers();
container.fadeIn();
$.validator.unobtrusive.parse('form');
},
error: function () {
alert('An error has occurred');
}
});
});
});
Все прекрасное. Теперь в одном экземпляре я хочу отобразить предупреждение пользователю confirm
, что они хотят загрузить страницу и потерять все свои изменения, поэтому я написал это:
$('a.addANewHotel').click(function (e) {
if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
e.stopPropagation();
}
});
теперь я пробовал return false
, e.preventDefault()
и e.stopPropagation();
, но независимо от того, что первый метод всегда запускается? Как я могу предотвратить включение дополнительного события клика? Это порядок событий?
Не вижу, насколько это актуально, но мой HTML:
<a style="" href="/CMS/CreateANewHotel?regionID=3&destinationID=1&countryName=Australia" class="button wideBorderlessButton ajaxLink addANewHotel">Add a new hotel</a>
Ответы
Ответ 1
Вы пробовали: event.stopImmediatePropagation
?
Я считаю, что это то, что вы ищете:
http://api.jquery.com/event.stopImmediatePropagation/
$('a.addANewHotel').click(function (e) {
if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
Ответ 2
stopPropagation
остановит событие от барботажа до родительских элементов, а не предотвратит запуск других обработчиков кликов на одном элементе. Поэтому ваше решение не будет работать.
Вы можете сделать это, например:
$('a.ajaxLink').click(function (e) {
e.preventDefault();
if($(this).hasClass("a.addANewHotel") &&
!confirm('Adding a new hotel will loose any unsaved changes, continue?')){
return false;
}
var container = $(this).parents('div.fullBottomContent');
var href = $(this).attr('href');
container.fadeOut('fast', function () {
$.ajax({
url: href,
dataType: "html",
type: "GET",
success: function (data) {
container.html(data);
BindEventHandlers();
container.fadeIn();
$.validator.unobtrusive.parse('form');
},
error: function () {
alert('An error has occurred');
}
});
});
});
Если у вас будет много разных типов ссылок, вы должны поместить общий код в функцию и привязать обработчики, используя класс дифференцирования. Затем эти обработчики могут вызвать общий код, если это необходимо.