Функция Onchange не работает в JQuery

Question

Функция Onchange не работает в JQuery.

На моей странице мне нужно добавить тег select, когда я нажимаю кнопку «Добавить».

Мой код здесь

Используя приведенный ниже код для добавления нового выбора тега. Этот код работает нормально.

var counter =1;  
var newrow = $(document.createElement('tr')).attr("id", 'newgroup' + counter); 
var httttm = "";  
httttm += "<td><select name='input_field[]' class='form-control' ><option value=''>Select</option><option value='input'>Text</option><option value='option'>Option</option></select></td></td>";   
newrow.after().html(httttm); 
newrow.appendTo("#newgroup"); 
counter++; 

Следующий код используется для получения значения параметра из тега select. Обычно код ниже работает нормально. Но когда я добавляю новый тег select, используя вышеперечисленный код, функция обмена не работает.

$('select').change(function(){ 
    var selvalue = $(this).val();   
    if(selvalue == "option") {  
     alert("hai"); 
    } 
});  

Answer 1

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

Как вы создаете элементы динамически, используйте Event Delegation, используя метод делегированных событий .on().

Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позднее.

т.е.

$(staticParentElement).on('event','selector',callback_function) 

Пример

$('#newgroup').on('change', "select", function(){ 
    var selvalue = $(this).val();   
    if(selvalue == "option") {  
     alert("hai"); 
    } 
}); 

Answer 2

Попробуйте это: Вам нужно делегировать события с помощью .on() связать событие изменения для динамически создаваемых элементов

$(document).on("change", 'select',function(){ 
    var selvalue = $(this).val();   
    if(selvalue == "option") {  
     alert("hai"); 
    } 
});