я не могу получить доступ к своему элементу с JQuery

Question

Привет Я хочу, чтобы получить доступ к моей кнопки на странице, но при нажатии на кнопку ничего не происходит

Пожалуйста направьте меня

$(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'); 
 
    }); \t  
 
    });

<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>

Answer 1

обработчики событий связаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код делает привязку к событию.

Необходимо использовать 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>