[英]Replacing a div that is called by jQuery onclick
我有一個列表對象,每個對象都包含一個由我的jQuery稱為onclick
的upvote
div(實際上,我在每個div中翻轉了表決按鈕,並通過Ajax異步更改了該div的投票)。
所有對象div都包含在row.replace
,我使用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;
});
});
當實際調用函數時, click
事件處理程序僅綁定到DOM中存在的元素。 您還需要使用委托的on()
事件偵聽器來綁定到將來的元素。 因此,對於您的代碼:
$('.upvote').click(function(){
改成:
$("body").on("click", '.upvote', function(event){
應該捕獲將來的點擊事件。 我將“ body”用作外部選擇器,因為我不知道您的HTML外觀如何,但是最好將“外部綁定”到“ .upvote” elements (so if they are all contained in a
的最接近祖先elements (so if they are all contained in a
ID為“ vote-list” elements (so if they are all contained in a
ul綁定到該列表,而不是“ body”)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.