JQuery/Javascript не работает с частичным представлением

Question

У меня есть основной вид, который вызывает Индекс, который содержит некоторые текстовые поля и позволяет добавлять дополнительные текстовые поля на экран через частичный просмотр. Основной вид ссылка на файл JS, который имеет следующий код:

Внешнего JS файл:

$("input[type='text']").on("change", function() { 
alert("here"); 
}); 

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

В моем понимании, метод live() должен обрабатывать текущий элемент в dom и любой будущий элемент, добавленный в dom. Теперь это заменяется на .on(). Следовательно, я использую .on(). Есть ли что-то новое, которое заменяет .on(), о котором я не знаю? .live() и .on() не работают в моем случае.

Для хорошей практики я не хочу, чтобы код js/jquery был добавлен в частичный вид, чтобы заставить его работать. Я надеюсь избежать избыточности и внедрить эффективные методы. Любая помощь приветствуется.

Answer 1

on() должен быть связан с элементом, который уже существует в DOM, когда страница загружается делегировать событие на элемент, который был добавлен динамически:

$(document).on("change", $("input[type='text']"), function() { 
    alert("here"); 
}); 

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

Answer 2

Попробуйте использовать следующий код:

$(document).on("change", "input[type='text']", function() { 
alert("here"); 
}); 

документ может быть изменен на любой родительский узел для обоих входов

Answer 3

Вы должны использовать делегирование событий. Поместите все ваши входы в контейнер div и поместите событие в этот родительский элемент. Он будет работать для элементов Dom, добавленных динамически. Так что, если вы поместите их в:

<div class="container"> 
    <input ...> 
    <input ...> 
    <input ...> 
</div> 

JQuery будет:

$('.container').on('change','input[type="text"]', function(e) { 
    var el =e.target; //if you need the element clicked on 
    alert('here'); 
}); 

Answer 4

Таким образом, в основном вы пытаетесь передать событие. Для этого, в соответствии с JQuery документация говорит, что вам нужно использовать что-то вроде этого:

`` `

$('body').on('change', 'input[type="text"]', function(e) { 
    console.log(e.target); // the input that triggered the event 
    console.log(e.currentTarget); // the body element 
}); 

` ``

Прослушивание событий в организме может быть слишком много, вы можете захотеть прослушать события «изменения» в определенной форме или элементе.