Как выбрать элементы, добавленные с помощью javascript

Question

У меня есть простой код, который проверяет выбранное изменение и выводит сообщение. Это работает нормально, но когда я вставляю новые .select-payment элементов на странице этого метод доступен только для первых и не те, созданных с помощью яваскрипта

$(document).ready(function() { 
    return $(".select-payment").on("change", function() { 
    return alert("hello"); 
    }); 
}); 

Любой идею, как заставить его работать на любой элемент, который добавляется после загрузки страницы, которая имеет класс .select-payment?

Answer 1

$(document).on("change", ".select-payment", function() { 
    alert("hello"); 
}); 

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

Answer 2

Вы можете использовать event delegation, как показано ниже,

$(document).on('change', '.select-payment', function() {.. 

1. Заменить документ с любым CloseBy контейнера, которые существуют в DOM при выполнении выше линии
2. делегация событие связывает событие родительского элемента и выполняет обработчик, когда event.target соответствует указанному селектору.

Answer 3

При ориентации динамически созданные элементы, вам нужно использовать .on() «S делегированы синтаксис:

$(document).on("change", ".select-payment", function() { 

Из документов:

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

Answer 4

Почему вы отправляете заявление о возврате? Вы должны прикрепить свой обработчик событий к документу, а не к существующему .select-payment.

Попробуйте это: $(document).on("change",".select-payment",function(){...});

Answer 5

$(document).on("change", ".select-payment", function() { 

alert("hello"); } 
); 

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

$('#closestId').on("change", ".select-payment", function() { 

    alert("hello"); 
} 
); 

если вы используете $ («документ») Jquery будет искать узел/тег с именем в качестве документа, как и не найти ничего, как документ, на самом деле является объект.

Но вы можете использовать $ ("body"), поскольку тело является узлом/элементом DOM.