Jquery onclick не срабатывает при обновлении через AJAX

Всем привет, есть onclick event

$(".delete-button").click(function() {
data = [];
data['id'] = $(this).closest('div').attr('id')
Ajax.updateProductList(data);
}

Есть контейнер

<div class="product-list">
  <span id="1">Product1</span><button class="delete-button">Delete</button>
  <span id="2">Product2</span><button class="delete-button">Delete</button>
  <span id="3">Product3</span><button class="delete-button">Delete</button>
</div>

Есть Функция Ajax.updateProductList(data)

var productId = data['id'];
$.ajax({
  headers: app.header,
  url: app.handleProductId,
  data: {
    productId: productId,
    }
}).done(function(data) {
    if(data.status == 1) {
        alert(data.status);
        console.info($('.product-list').html());
        $('.product-list').html(data.html);
        console.info(data.html);
    }
});

При нажатии на кнопку delete, запрос отправляется серверу, сервер удаляет из бд 1 продукт, берет список продуктов и возвращает его как html, из jquery получаем новый product-list и меняем на текущий product-list через

$('.product-list').html(data.html)

и после этого, кнопки delete-button не срабатывают, onclick их не отрабатываем, в чем причина ?