您好,我想访问页面上的按钮,但是当我点击按钮时没有任何反应
请指导我
$(document).ready(function() {
$('#cart_inside').load('php/load_Cart.php',function(e){
$('.add_to_cart').click(function(e) {
var id = $(this).next().val();
$.post("php/cart_add.php", {
id: id
}, function(e) {
$('#cart_inside').append("<span>" + e + "</span><button></button>");
});
});
$('button').click(function(e){
alert('hi');
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="cart">
<div id="cart_inside"></div>
<a href="php/cart_remove_all.php">empty cart</a>
<div id="buy">
<a href="final_cart.php">cart</a>
</div>
</div>
&#13;
答案 0 :(得分:4)
事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。
您需要使用Event Delegation委托事件方法{。}}来使用.on()。
委派事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素。
即
$(document).on('event','selector',callback_function)
示例
$(document).ready(function() {
$('#cart_inside').append("<button>button</button>");
$('#cart_inside').on('click', 'button', function(){
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cart_inside'></div>