Question

我有一堆图像，人们可以点击顶部的心脏来“爱”或“不爱”。我想出了如何使它与Ajax / jQuery一起工作，但出于某种原因，它只适用于once。

下面的图像也有一个链接...所以我需要对覆盖在顶部的心脏div进行一次preventDefault。这又一次有效。

结构如下：

<a href="...">
<div class="image">
  <img src="...">
    <div class="love-response love"></div>
</div>
</a>

因此，如果他们点击心脏，它就能正常工作......但是如果他们再次点击它，它就会转到下面图像的链接。然而，如果他们在点击链接后重新加载页面，他们可以再次点击它，它可以解开它。但话又说回来，如果他们再次点击而没有重新加载，则再次转到下面的图像。

我认为这与json数据被返回然后更新内容这一事实有关，但是在进一步点击它时它不再用于执行preventDefault。

这里可能有什么问题？

jQuery(document).ready(function($){
$('.love').click(function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $("#love-response-" + id).hide();
  $("#love-waiting-" + id).show();
  $.ajax({
    url: "https://www.domain.com/love.php?id=" + id,
    type: "GET",
    dataType: 'json',
    success: function(json) {
        if(json.valid == 1) {

            $("#love-waiting-" + id).hide();
            $("#love-response-" + id).replaceWith(json.message);
            $("#love-response-" + id).show();

        }
        else {
            $("#love-waiting-" + id).hide();
            $("#love-response-" + id).replaceWith(json.message);
            $("#love-response-" + id).show();
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {

        $("#love-waiting-" + id).hide();
        $("#love-response-" + id).html('ERROR');
    },
    timeout: 15000
  });
});
});

json非常基本。它是：

{
"valid":"0",
"message":"<div class=\"love-response love\" id=\"love-response-782\" data-id=\"782\"><span class=\"icon love-black\"><\/span><\/div>"
}

或

{
"valid":"1",
"message":"<div class=\"love-response love\" id=\"love-response-782\" data-id=\"782\"><span class=\"icon love-red\"><\/span><\/div>"
}

我真的觉得问题是某种方式，在从json收到回复后，preventDefault不再执行了。

Answer 1

将click事件处理程序委托给某人。那总是在你的DOM中因为.love被操作dom（通过ajax加载）所以它只触发一次因为脚本执行时元素不在那里

只需更改

 $('.love').click(function (e) {

到

 $(document).on('click','.love',function (e) {

Answer 2

执行此操作时：

$('.love').click(function (e) {

您正在将该函数附加到这些匹配元素的click事件。不是选择器，而是当时选择的元素。然后当你这样做时：

$("#love-response-" + id).replaceWith(json.message);

您删除这些元素并添加新元素。那些新的没有与它们相关的点击事件。旧的那些。

您可以使用event delegation更正此问题。这意味着绑定到某些常见父元素的click事件并根据某个选择器过滤click的原点。最简单的是，它看起来像这样：

$(document).on('click', '.love', function (e) {
    // your code
});

jquery Ajax调用似乎只工作一次？

2 个答案: