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

时间:2015-03-12 13:04:35

标签: javascript jquery ajax

我有一堆图像,人们可以点击顶部的心脏来“爱”或“不爱”。我想出了如何使它与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不再执行了。

2 个答案:

答案 0 :(得分:6)

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

只需更改

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

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

答案 1 :(得分:2)

执行此操作时:

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

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

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

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

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

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