jQuery怎么获取动态生成的元素,on方法的话,父元素也是动态生成的,怎么写。
//对json数据进行遍历
$.each(data,function (index,item) {
html = "";//每次循环数据都设置为空
html += "<h1 align='center'>我的订单</h1>";
html += "<table id='dataTb' border='1' align='center' width='500px'>";
html += "<tr align='center'><td>订单号</td><td>我的订单</td><td>应支付</td><td></td></tr>";
html += "<tr align='center'>";
html += "<td>"+item.num+"</td>";
html += "<td>"+item.name+"</td>";
html += "<td>"+item.price+"</td>";
html += "<td><a href='' class='pay'>立即支付</a></td>"
html += "</tr>";
html += "</table>";
document.write(html); //在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
});
}
});
});
//支付购物车订单 //因为pay-btn按钮非本页原按钮,是刷新后的新按钮,所以点击事件要这样写。
$('#pay-btn').on("click",'.pay',function(){
alert(1);
});
没有反应。'#pay-btn' 这个父元素也是动态生成的
你用document.write(html);就表示你的元素只是在页面加载时添加一次。
那click事件就不需要用委托式的方式绑定了。
可以在元素添加到页面之后直接对.pay元素本身绑定click事件。
那就把 $('#pay-btn')换成#pay-btn的父元素。
或者换成 $(document)
//可以尝试绑定在DOM上
$(document).on('click','.pay',function(){
console.log(11)
});
你的id=pay-btn的元素在哪里
建议用clone 的方式去弄dom 这样绑定事件不会有问题,也不会重复绑定事件
绑定在document上也没有效果
原代码发错了 响应函数是下面这样的
$('#dataTb').on("click",'.pay',function(){
alert(1);
});
你渲染完成之后 再去执行这个方法
$.each(data,function (index,item) {
html = "";//每次循环数据都设置为空
html += "<h1 align='center'>我的订单</h1>";
html += "<table id='dataTb' border='1' align='center' width='500px'>";
html += "<tr align='center'><td>订单号</td><td>我的订单</td><td>应支付</td><td></td></tr>";
html += "<tr align='center'>";
html += "<td>"+item.num+"</td>";
html += "<td>"+item.name+"</td>";
html += "<td>"+item.price+"</td>";
html += "<td><a href='' class='pay'>立即支付</a></td>"
html += "</tr>";
html += "</table>";
document.write(html); //在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
});
}
});
});
上面的$each 执行完成之后 执行 $('#dataTb').on("click",'.pay',function(){
alert(1);
});
不然绑定不上事件
如果按照我说的模板的形式 就没有这个问题 就是clone 的方式
如果直接在$each执行完毕之后 执行使用普通的响应函数也有反应了。 那就不要on方法了呗
$(".pay").click(function(){
alert(12);
});