Почему JS не видит класс элемента подгружающегося из Ajax?

Question

[33balabol]

Схема дел выглядит следующим образом:
- Есть список заказов.
- При клике на ссылку отдельного заказа на эту же страницу в отдельный DIV выводится тот самый заказ аяксом.
- В PHP обработчике, который создает тот самый заказ исходя из выбранной ссылки имеются кнопки, к примеру, изменения его статуса. (Оплачен, готов к выдаче и тд.)

<button order="'6" otv="3" class="in-shop-order2 btn btn-success" >Оплачен</button> <button otv="4" order="'6" class="in-shop-order2 btn btn-danger">Отменить</button>

- Так вот те кнопки которые были выведены далее не видит JS при попытке отправлять еще один AJax запрос на выполнение дальнейших функций, к примеру, отмены заказы.

Соответственно, спрашивается, как исправить?

Картинка для наглядности:



(Если поместить эти же кнопки не в файл-обработчик, а на страницу все будет работать, однако нужно, как я понимаю, выводить их вместе с заказом.)

Answer 1

[Сергей delphinpro]

Используйте делегирование событий.
в jQuery

$(document).on('click', '.my-class', function(){
  // some code
});

Comments

[33balabol]

Спасибо.

Answer 2

[Максим Тимофеев]

Надо правильно селекторы ставить.
Не так:
$('#mydiv').on('click',function(){})
а так
$('document').on('click','#mydiv',function(){})

Что как и почему описано тут:
stackoverflow.com/questions/16062899/jquery-doesnt...

Comments

[33balabol]

Спасибо.