У меня есть следующий код jQuery, и он не срабатывает по требуемым действиям, когда я вынимаю первые 2 $("body").on
функции, третий, т.е. ($("body").on("click", '.upvote', function(event){
) запускается. Когда я ничего не ставил, ничего не работает.
$(document).ready(function () {
//function 1
$("body").on("change", '.select', function (event) {
$('.row.replace').empty();
$('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>");
var filter = $(this).find(":selected").attr("name");
$.ajax({
type: "POST",
url: "/filter_home/" + filter + "/" + "TrendingNow" + "/",
data: {
'name': 'me',
'csrfmiddlewaretoken': '{% csrf_token %}'
},
//dataType: "json",
success: function (data) {
$('.row.replace').html("mem");
},
error: function (xhr, errmsg, err) {
alert(err);
}
}); //end ajax
return false;
}); //end onchange
//function 2
$("body").on("click", '.sorter', function (event) {
$('.row.replace').empty();
$('.row.replace').append("<br><br><br><br><p align='center'><img id='theImg' src='/media/loading1.gif'/></p><br><br><br><br><br><br><br><br>");
var sort = $(this).attr("name");
var filter = $('.select').find(":selected").attr("name");
$.ajax({
type: "POST",
url: "/filter_home/" + filter + "/" + sort + "/",
data: {
'name': 'me',
'csrfmiddlewaretoken': '{% csrf_token %}'
},
success: function (data) {
$('.row.replace').html(data);
},
error: function (xhr, errmsg, err) {
alert(err);
}
}); //end ajax
return false;
}); //end onclick
//function 3
$("body").on("click", '.upvote', function (event) {
var x = $(this).attr("name");
$.ajax({
type: "POST",
url: "/upvote/" + x + "/",
data: {
'name': 'me',
'csrfmiddlewaretoken': '{{csrf_token}}'
},
dataType: "json",
success: function (json) {
var y = "vote-count" + x;
$('i[class= "' + y + '"]').text(json.vote_count);
//flip button
$('.flip' + x).find('.card').toggleClass('flipped');
},
error: function (xhr, errmsg, err) {
alert("oops, something went wrong! Please try again.");
}
}); //and ajax
return false;
}); //end onclick
}); //end ready
Обработчики событий (функции 1,2,3) возвращают false. Это останавливает событие от пузырьков DOM. Я предполагаю, что они не срабатывают, как ожидалось, потому что первая функция для обработки события - это остановка распространения. Проверьте это, удалив оператор return.
Кроме того, вы можете попытаться определить, как делегированный обработчик событий ближе к цели.