Как установить флажок, который был добавлен

Question

Использование JQuery Я добавляю tr, где один из td включает в себя флажок. Он выглядит красиво на экране. Однако я хочу выбрать один из флажков и вызвать функцию при щелчке. По какой-то причине селектор не видит добавленный флажок. Я предполагаю, что это связано с тем, что флажок не находится в исходном коде HTML.

Итак, вопрос: что мне делать, чтобы установить этот флажок?

$.each(categories, function (i, product) { 
    $(".table_products").append('<tr class="empty"><td >' + product.product_name + '</td><td>' + product.price + '</td><td> <input type="checkbox" value="cat_id"></td></tr>'); 

    $("tr").addClass("cat_products"); 
}); 

$("td input:checkbox").on('click', function() { 
    alert('line 41'); 
}); 

Answer 1

Я должен дать краткое описание того, как работают события. В JavaScript события «пузырь». Это означает, что если вы нажмете на интервал, то в нем сначала появится событие клика. Затем событие click пузыриется до родителя диапазона (скажем, div). Затем событие пузырится оттуда до следующего элемента в цепочке. И так далее, пока не дойдете до верхнего элемента DOM.

jQuery дает возможность подключать слушателей событий к любому уровню в документе. И это также дает вам возможность фильтровать. Поэтому, когда мы делаем это:

$('.table_products').on('click', 'td input:checkbox', function(){...});

Мы прикрепляем слушатель событий для .table_products элемента. этот элемент никогда не меняется. Это всегда есть. Мы добавили часть фильтра, или 'td input:checkbox'. Эта часть сообщает jQuery: «Когда вы получаете событие click внутри таблицы, посмотрите и посмотрите, произошло ли это событие щелчка на дочернем элементе, который соответствует этому фильтру».

Это позволяет добавлять новые элементы к слушателю. Надеюсь, это объяснение поможет. Вы можете получить дополнительную информацию here