Обработчик кнопок JS ид кнопки равен ид заказу

Question

имею проблему следующего характера.

Есть кнопка

<button id="button-history{{ order.order_id }}"  data-loading-text="{{ text_loading }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i> {{ button_history_add }}</button>

Где {{ order.order_id }} равен ид заказу

Получаю следущий ид кнопки

button-history1259

Вопрос как мне сделать под нее обработчик(для каждого заказа).

По моей логике было все просто, а именно

$('button-history'+ zakaz_id).on('click', function() {

console.log('Клик'); });

Успешно послан далеко, ничего не происходит.

Делаю еще вот так:

(`#button-history${zakaz_id}`).on('click', function() {

console.log('Клик'); });

Также ничего не происходит.

Хотя в консоле, я получаю корректные значения.. но обработчик шлет меня куда подальше.

Подскажите как решить задчку такую)

Answer 1

добавить в button обработчик onclick и передать туда id onclick="handleClick(order.order_id)"
добавить в js файл функцию handleClick

handleClick(id) { console.log(id) }

Ещё можно так:

$('.btn-primary').each(function() {
  $(this).on('click', function() {
    // здесь можно получить атрибут каждой кнопки
    const id = $(this).attr('data-id');
  });
})

ну и соответственно добавить атрибут data-id в кнопку

<button data-id={{order.order_id}} class="btn-primary"></button>

БЛОГ НА HUSL

Обработчик кнопок JS ид кнопки равен ид заказу

Ответы (1 шт):