在AJAX中使用一次后重新绑定Click事件
Rebind Click Event in AJAX after Using It Once
我在AJAX调用中遇到了单击事件的问题。我嵌套了AJAX调用,因为点击事件发生在一个直到第一次AJAX调用才存在的div上。基本上,我从数据库中加载用户评论,然后在评论上有一个上下投票按钮。这是第二个ajax调用。你可以在这里看到JS:
//FIRST LOAD THE COMMENTS WITH THE FIRST AJAX CALL
$('.comments_submit').each(function(){
var comments_text = $(this).parent().find('textarea').val();
var video_id = $(this).closest('div.home_video').find('.video').attr('id');
var myData = 'body=' + comments_text + '&video_id=' + video_id + '&type=load';
var that = this;
$.ajax({
type: 'POST', // HTTP method POST or GET
url: 'comments_ajax.php', //Where to make Ajax calls
dataType:'text', // Data type, HTML, json etc.
data:myData, //post variables
success:function(response){
//UPON SUCCESSFULLY LOADING THE COMMENTS / BIND CLICK EVENT TO VOTE UP AND VOTE DOWN
$(that).closest('div.home_video').find('.comments_list').html(response);
$('.vote_link.down').each(function(){
$(this).click(function(){
var comment_id = $(this).closest('.comment_box').attr('id');
//MAKE AJAX CALL TO SUBMIT COMMENTS
var myData = 'comment_id=' + comment_id + '&type=vote_down';
var that = this;
$.ajax({
type: 'POST', // HTTP method POST or GET
url: 'comments_ajax.php', //Where to make Ajax calls
dataType:'text', // Data type, HTML, json etc.
data:myData, //post variables
success:function(response){
//REFORMAT UPON SUCCESSFUL AJAX CALL
$(that).text(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert('didnt work'); //throw any errors
}
});
});
});
$('.vote_link.up').each(function(){
$(this).click(function(){
var comment_id = $(this).closest('.comment_box').attr('id');
//MAKE AJAX CALL TO SUBMIT COMMENTS
var myData = 'comment_id=' + comment_id + '&type=vote_up';
var that = this;
$.ajax({
type: 'POST', // HTTP method POST or GET
url: 'comments_ajax.php', //Where to make Ajax calls
dataType:'text', // Data type, HTML, json etc.
data:myData, //post variables
success:function(response){
//REFORMAT UPON SUCCESSFUL AJAX CALL
$(that).text(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert('didnt work'); //throw any errors
}
});
});
});
},
error:function (xhr, ajaxOptions, thrownError){
alert('didnt work'); //throw any errors
}
});
});
注释加载的服务器端代码是:
if($_POST['type']=="load"){
$sql_select = "SELECT * FROM comments WHERE video_id = '$video_id' ORDER BY timestamp DESC LIMIT 7";
$result_select = $mysqli->query($sql_select);
while($row = mysqli_fetch_array($result_select)){
echo "<div class='comment_box' id='".$row['id']."'>".$row['body']."
<div class='votes'>
<a class='vote_link up'>UP (".$row['vote_up'].")</a>
<a class='vote_link down'>DOWN (".$row['vote_down'].")</a>
</div>
</div>";
}
}
投票赞成的服务器端代码(与投票反对的代码几乎相同):
if($_POST['type']=="vote_up"){
$comment_id = $_POST['comment_id'];
$sql_select = "SELECT * FROM comments WHERE id = '$comment_id'";
$result_select = $mysqli->query($sql_select);
$row = mysqli_fetch_array($result_select);
$votes = $row['vote_up'] + 1;
$sql_update = "UPDATE comments SET vote_up = '$votes' WHERE id = '$comment_id'";
$result_update = $mysqli->query($sql_update);
$sql_select = "SELECT * FROM comments WHERE id = '$comment_id'";
$result_select = $mysqli->query($sql_select);
$row_vote = mysqli_fetch_array($result_select);
echo "
UP (".$row_vote['vote_up'].")
";
}
有几件事。当我点击该按钮时,由于某种原因,它会在up或DOWN字段中添加多个向上投票。但它也会解除点击事件的绑定。
我以前从未嵌套过AJAX调用,所以也许有更好的方法在第一个函数发生后绑定AJAX函数?谢谢你的帮助!
您应该能够做到:
$('.vote_link.down').click(function(){
var comment_id = $(this).closest('.comment_box').attr('id');
// etc.
});
$('.vote_link.up').click(function(){
var comment_id = $(this).closest('.comment_box').attr('id');
// etc.
});
这将简化您的代码,并可能解决一些问题。
我已经找到了答案(对于其他有同样问题的人)。不要将函数绑定在顶级AJAX调用中,只需使用$(document).on()来调用以下函数即可:
$(document).on("click",".vote_link.down",function(e){
alert('testing');
});
相关文章:
- jQuery.bind或.on习惯于绑定到新记录
- 具有角度新路由器的子路由的多重绑定
- 在页面重新加载后绑定事件,并仅使用Knockout.js、html和js创建新的html元素
- 将点击事件绑定到新元素&使得ID'是独一无二的
- 取消绑定/绑定单击jquery selectbox插件
- 使用ng repeat将表单元素绑定到角度中的新对象
- 在knocket js中应用绑定后,向视图模型添加新属性
- jQuery绑定ajax:成功地不在rails3app中为新创建的(ajax)项工作
- 如何使用 KNOCKOUTJS 模板绑定绑定依赖模板
- 如何将新函数绑定到元素的 onclick 事件,并使其在所有其他绑定函数之前运行
- 挖空选择框未绑定到初始模型值,而是绑定新值
- Jquery 不会绑定到新的附加元素
- 新的google.maps.LatLngBounds()绑定扩展和中心工作随机
- 如果我为 JS 变量分配一个新值,它会破坏它的绑定吗?
- Knockoutjs:同时使用单击和选中绑定时绑定评估的顺序
- 使用敲除foreach绑定绑定方法名称
- KnockoutJS:使用'html'绑定,新元素不绑定
- 如何在用AJAX加载的新数据上绑定点击?——JQuery
- 不能使用keyup给属性赋新值.在绑定到该属性的输入上输入事件
- js树形图:将新旧属性绑定到SVG元素