Question

我有一个列表对象，每个包含一个upvote div，由我的jQuery调用onclick（我基本上翻转每个div中的投票按钮，并通过Ajax异步更改该div的投票）

所有对象div都包含在row.replace中，我用它来异步对对象进行排序。问题是，一旦我点击分拣机并对.row.replace div的内容进行排序，对象的排序列表中的upvote div就会停止调用onclick即。在使用jQuery + ajax排序之前，我可以upvote并删除我的upvote，一旦应用排序并替换div的内容，我的upvote按钮就会停止工作。

这是jQuery：

$(document).ready(function () {
  $('.sorter').click(function () {
    $('.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");
    $.ajax({
      type: "POST",
      url: "/filter_home/" + "Lunch" + "/" + "TrendingNow" + "/",
      data: {
        'name': 'me',
        'csrfmiddlewaretoken': '{{csrf_token}}'
      },
      dataType: "json",
      success: function (json) {
        //loop through json object
        //alert("yoo");
        $('.row.replace').empty();
        for (var i = 0; i < json.length; i++) {
          $('.row.replace').append("<div class='showroom-item span3'> <div class='thumbnail'> <img class='food_pic' src='/media/" + json[i].fields.image + "' alt='Portfolio Image'> <div class='span3c'> <a><b>" + json[i].fields.name + "</b> </a> </div> <div class='span3d'> posted by <a><b>" + json[i].fields.creator.username + "</b></a> </div> <div class='span3c'> <div class='btn-group'> <div class='flip flip" + json[i].pk + "'> <div class='card'> {% if 0 %} <div class='face front'> <button type='button' class='btn btn-grove-one upvote' id='upvote' name='" + json[i].pk + "'>Upvoted <i class='glyphicons thumbs_up'><i></i></i><i class='vote-count" + json[i].pk + "'>" + json[i].fields.other_votes + "</i></a></button> </div> <div class='face back'> <button type='button' class='btn btn-grove-two upvote' id='upvote' name='" + json[i].pk + "'>Upvote <i class='glyphicons thumbs_up'><i></i></i><i class='vote-count" + json[i].pk + "'>" + json[i].fields.other_votes + " </i></a></button> </div> {% else %} <div class='face front'> <button type='button' class='btn btn-grove-two upvote' id='upvote' name='" + json[i].pk + "'>Upvote <i class='glyphicons thumbs_up'><i></i></i><i class='vote-count" + json[i].pk + "'>" + json[i].fields.other_votes + " </i></a></button> </div> <div class='face back'> <button type='button' class='btn btn-grove-one upvote' id='upvote' name='" + json[i].pk + "'>Upvoted <i class='glyphicons thumbs_up'><i></i></i><i class='vote-count" + json[i].pk + "'>" + json[i].fields.other_votes + "</i></a></button> </div> {% endif %} </div> </div> </div> <div class='btn-group'> <button type='button' class='btn btn-grove-two'><i class='glyphicons comments'><i></i></i>" + json[i].fields.comment_count + "</a></button> </div> </div> </div> </div>");
        }
        //json[i].fields.name
      },
      error: function (xhr, errmsg, err) {
        alert("oops, something went wrong! Please try again.");
      }
    });
    return false;
  });
  $('.upvote').click(function () {
    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.");
      }
    });
    return false;
  });
});

Answer 1

click事件处理程序仅在实际调用函数时绑定到DOM中存在的元素。您还需要使用delegated on()事件侦听器绑定到将来的元素。所以对于你的代码：

$('.upvote').click(function(){

更改为：

$("body").on("click", '.upvote', function(event){

应该捕获未来的点击事件。我正在使用“body”作为外部选择器，因为我不知道你的HTML是什么样的，但是最好将“外部绑定”到最近的祖先，以及带有id的'.upvote elements (so if they are all contained in a ul` “vote-list”绑定到那个而不是“body”）。

替换jQuery onclick调用的div

1 个答案: