在jQuery中处理点击事件(对于"喜欢"和"不喜欢"按钮)

Question

我正在尝试使用AJAX和jQuery创建一个类似不同的系统。"喜欢"事件似乎工作正常，但是当我想"不喜欢"时，事件没有响应。任何解决此问题的建议将不胜感激。

$(document).ready(function() {
$(".like").click(function() { //this part is working
var item_id = $(this).attr("id");
var dataString = 'item_id=' + item_id;
$('a#' + item_id).removeClass('like');
$('a#' + item_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(data) {
if (data == 0) {
alert('you have liked this quote before');
} else {
$('a#' + item_id).addClass('liked');
$('a#' + item_id).html(data);
}
}
});
});
$(".liked").click(function() { //this part is not working
var item_id = $(this).attr("id");
console.log(item_id);
var dataString = 'item_id=' + item_id;
$('a#' + item_id).removeClass('liked');
$('a#' + item_id).html('<img src="images/loader.gif" class="loading" />');
$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(data) {
if (data == 0) {
alert('you have liked this quote before');
} else {
$('a#' + item_id).addClass('like');
$('a#' + item_id).html(data);
}
}
});
});
});

Answer 1

$(".like")和$(".liked")在文档准备就绪时检索，但在元素中添加/删除类时不会更新。

如果您为更通用的类分配投票元素，例如"like-toggle"，您将能够执行以下操作：

$(document).ready(function() {
$('.like-toggle').click(function(event) {
if ($(event.target).hasClass('like') {
// Call your unlike code, replace like with liked.
} else {
// Call your like code, replace liked with like.
}
});
});

这将起作用，因为like-toggle类永远不会从元素中删除，因此文档准备就绪时存在的元素将继续运行。