如何使用on.()绑定jquery ajax返回的html
How to bind jquery ajax returned html using on.()
我知道有人问过这个问题,但我不知道如何在我的用例中正确地实现它。
结束游戏是当一个项目被添加到购物车通过点击项目添加按钮,它触发和ajax调用传递项目id到一个php函数,将其添加到购物车会话(这工作得很好)。
在ajax调用成功时,它调用update_cart()函数,该函数构建新的购物车html并返回它。保存购物车html的div的内容被新的购物车html内容(商品数量价格行项目)所替换。这部分也很好。
新的购物车内容行项目包括名称、在输入中显示的数量和价格。
新创建的行项数量输入没有响应onblur动作(我认为),因为它没有绑定到任何东西,因为它在页面加载时不存在。
可以一些了不起的绅士(或女人)和学者帮助我理解如何绑定新的输入,这样我就可以调用ajax函数来更新项目数量时,字段模糊?
我JS$(document).ready(function () {
function update_cart() {
var dataString = "";
//alert (dataString);return false;
$.ajax({
type: "POST",
dataType: "html",
data: dataString,
url: "/actions/updatecart.action.php",
beforeSend: function() {
$('#loader').show();
},
complete: function() {
$('#loader').hide();
},
success: function(data) {
$('#cart-items').hide().html(data).fadeIn( "slow");
},
error: function(data){
$('#msg').hide().html("<div class='col-md-8'><div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>Error Updating Cart</div>").slideDown( "fast");
}
});
};
$(function() {
$("button[id^=add]").on("click", function(){
var id = $( this ).data('id');
var dataString = 'id='+ id;
/* alert (dataString);return false; */
$.ajax({
type: "POST",
dataType: "html",
data: dataString,
url: "/actions/add.action.php",
beforeSend: function() {
$('#loader').show();
},
complete: function() {
$('#loader').hide();
},
success: update_cart ,
error: function(data){
// $('#msg').hide().html("<div class='col-md-8'><div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>Error Adding Item</div>").slideDown( "fast");
}
});
return false;
});
});
$(function() {
$("input[id^=lineitem]").on("blur", function(){
var id = $( this ).data('id');
var qty = $( this ).val();
var dataString = 'id='+ id + '&qty=' + qty;
alert (dataString);return false;
$.ajax({
type: "POST",
dataType: "html",
data: dataString,
url: "/actions/add.action.php",
beforeSend: function() {
$('#loader').show();
},
complete: function() {
$('#loader').hide();
},
success: update_cart ,
error: function(data){
// $('#msg').hide().html("<div class='col-md-8'><div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>Error Updating Quanity</div>").slideDown( "fast");
}
});
return false;
});
});
});
我的返回的html和php foreach创建它
foreach($_SESSION['basket']['items'] as $item){ ?>
<div class="cart-item">
<div class="col-lg-8 col-md-8 np item"><?php echo $item['name']; ?></div>
<div class="col-lg-2 col-md-2 np"><div class="input-group"><input data-id="<?php echo $item['id']; ?>" id="lineitem-<?php echo $item['id']; ?>" value="<?php echo $item['count']; ?>" type="text" class="form-control"></div></div>
<div class="col-lg-2 col-md-2 np price"><?php echo $item['price']; ?></div>
</div>
<?php } ?>
感谢任何可以帮助我弄清楚如何做这件事的人。到目前为止,一切都很顺利。
我想这就是你想要的:
...success: function(data) {
$('#cart-items').hide().html(data).fadeIn( "slow");
$(".cart-item .input-group input").bind("change",...function);
或$("。购物车-item - input-group - input).on("change",…function);或$("。
}...
相关文章:
- JS验证ajax返回的html中的表单数据
- Morris.js无法显示ajax返回的数据
- 统计ajax返回数据中的html元素
- 在Smarty中定义AJAX返回的格式
- 如何从ajax返回两个html内容
- 如何使用 AJAX 返回 JS 值
- 从Ajax返回时执行Javascript
- JQuery无法处理ajax返回的内容
- 保存通过Ajax返回的信息后出现$_POST错误
- 我需要从ajax返回值
- 如何在html页面中从ajax返回json数据
- ajax 返回带有循环的图像长度,检查最后一个循环
- Jquery ajax返回错误
- 对从Ajax返回的数据使用Jquery方法,不打印数据
- ajax返回空字符串,而不是json[python-cgi]
- 然后在ajax返回之前运行
- 使用 AJAX 返回 json 数组
- 在 php 上使用 ajax 返回值
- jQuery验证后,$.ajax返回HTML源代码
- 根据 Ajax 返回的数据提交表单