Javascript 替换jQuery onclick调用的div
我有一个列表对象,每个对象都包含一个Javascript 替换jQuery onclick调用的div,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个列表对象,每个对象都包含一个upvotediv,jQuery称之为onclick(我基本上在每个div中翻转投票按钮,并通过Ajax异步更改该div的投票) 所有对象div都包含在行中。replace用于异步排序对象。问题是,一旦我单击排序器并对.row.replacediv的内容进行排序,对象排序列表中的upvote div就不再被调用onclickie。一旦应用了排序并替换了div的内容,我可以在使用jQuery+ajax进行排序之前进行upvote并删除upvote,我的向上投票按
upvote
div,jQuery称之为onclick
(我基本上在每个div中翻转投票按钮,并通过Ajax异步更改该div的投票)
所有对象div都包含在行中。replace
用于异步排序对象。问题是,一旦我单击排序器并对.row.replace
div的内容进行排序,对象排序列表中的upvote div就不再被调用onclick
ie。一旦应用了排序并替换了div的内容,我可以在使用jQuery+ajax进行排序之前进行upvote并删除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;
});
});
$(文档).ready(函数(){
$('.sorter')。单击(函数(){
$('.row.replace').empty();
$('.row.replace')。追加(“
”;
var sort=$(this.attr(“name”);
$.ajax({
类型:“POST”,
url:“/filter_home/”+“午餐”+“/”+“趋势现在”+“/”,
数据:{
'姓名':'我',
“csrfmiddlewaretoken”:“{csrf_令牌}”
},
数据类型:“json”,
成功:函数(json){
//循环遍历json对象
//警惕(“yoo”);
$('.row.replace').empty();
for(var i=0;i
实际调用函数时,单击事件处理程序仅绑定到DOM中存在的元素。您还需要使用事件侦听器绑定到未来的元素。因此,对于您的代码:
$('.upvote').click(function(){
改为:
$("body").on("click", '.upvote', function(event){
应该捕捉未来的点击事件。我使用“body”作为外部选择器,因为我不知道您的HTML是什么样子,但最好是“外部绑定”到与“.upvote元素最近的祖先(因此,如果它们都包含在带有id的
ul`vote list”中,则绑定到该元素而不是“body”)