Intereting Posts
Как очистить содержимое iFrame от другого iFrame Как печатать только выбранный элемент HTML? Содержимое вертикального центра Bootstrap в строке Вызов Facebook API внутри приложения FB требует входа (только в IE) 4 дополнительных вертикальных пикселя? IE 9 имеет непрозрачность для дочернего элемента, и я не могу его остановить, используя как показать календарь в текстовом поле нажмите в html Как обернуть divs вот так? Javascript, чтобы определить, отображается ли выпадающий элемент select Как заставить textarea заполнить ширину его родительской ширины? Доступ к статическому в django аккордеон с ng-repeat и ng-bind-html не будет работать HTML-изображение или srcset для чувствительных изображений Какой в ​​настоящее время лучший способ получить значок для отображения во всех браузерах, поддерживающих Favicons? Как понять символ равенства «=» в тексте электронной почты IMAP?

Событие JQuery не запускается для элементов DOM Создано после загрузки страницы

У меня есть страница, которая запускает функцию calculate () при изменении поля номера html5. Я привязываю почти каждое событие, к которому я могу придумать, и оно работает для первоначально загруженных элементов DOM.

Однако, если я добавляю элементы после загрузки dom, функции изменения не запускаются.

Я добавил кнопку, которая запускает функцию calculate (), и когда клик будет запускаться для вновь созданных элементов, а также для исходных.

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

Триггеры JQuery

$('.score').change(function() { calculate(); }); $('.score').bind('keyup mouseup', function() { calculate(); }); $('.score').mousewheel(function() { calculate(); }); $('.score').click(function() { calculate(); }); $('.score').keypress(function() { calculate(); }); 

Вычислить функцию

 function calculate() { $("tbody tr").each(function() { row_total = 0; $(".score", this).each(function() { row_total += Number($(this).val()); }); $(".total", this).val(row_total); }); var arr = []; var row = 0; $("tbody tr").each(function() { $(".total", this).each(function() { arr[row] = $(this).val(); row += 1; }); }); var sorted = arr.slice().sort(function(a, b) { return b - a }) var ranks = arr.slice().map(function(v) { return sorted.indexOf(v) + 1 }); row = 0; $("tbody tr").each(function() { $(".place", this).each(function() { $(this).val(ranks[row]); row += 1; }); }); $("tbody tr").each(function() { $(".place", this).each(function() { var p = $(this).val(); switch (p) { case '1': $(this).css('background-color', 'gold'); break; case '2': $(this).css('background-color', 'silver'); break; case '3': $(this).css('background-color', '#8c7853'); break; case '4': $(this).css('background-color', 'white'); break; default: $(this).css('background-color', 'white'); } }); }); } 

Функция genRow

 function genRow(i) { var x = ""; for (var j = 0; j < i; j++) { x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; x += ''; } return x; } 

Код HTML

  
Name Judge 1 Judge 2 Judge 3 Judge 4 Judge 5 Place

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

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

т.е.

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

пример

 $(document).on('click', '.score', function(){ //Your code alert("clicked me"); }); 

Вместо document вы должны использовать ближайший статический контейнер.

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