JQuery: для вызова функции для динамически вставленных элементов ввода

Прежде всего, я поясню, что я прошел по ссылке ниже, но мне было трудно решить свою проблему. Link1, Link2, Link3

Проблема:

У меня на странице загружено следующее:

<div class = "btn-group">
 <label class = "someClassDifferentForEachLoadedElement btn btn-primary " 
        onclick = "$('#someIdDifferentForEvryElement')
        .find('label.active')
        .toggleClass('active', false);
        $(this).toggleClass('active', true);">

  <input class = "validated" style = "display:none" toggle = "true" toggle- 
         checkbox = "false" type = "radio" value = "Y">
  Yes
 </label>     
 <label class = "someClassDifferentForEachLoadedElement btn btn-primary"
        onclick = "$('#someIdDifferentForEvryElement')
        .find('label.active')
        .toggleClass('active', false);
        $(this).toggleClass('active', true);">  

   <input class = "validated" style = "display:none" toggle = "true" toggle- 
          checkbox = "false" type = "radio" value = "N">
   No
  </label>
 </div>

Весь приведенный выше код (самый сложный код удален) отображает интерактивное поле Да / Нет, как на изображении это

Приведенный ниже элемент динамически загружается в DOM при ответе ДА

 <input class = "validated GTnumeric" size = "2" type = "text" value = "">

Подход:

Необходимо изменить тип загруженного элемента ввода с текстового на тел.

Ниже приведены все элементы, загруженные в DOM, которые отлично подходят для элементов, загруженных изначально:

 $(document).ready(function() {                        
  $(".GTnumeric").not("[type=hidden]").attr("type", "tel");
 });

Но мне трудно заставить его работать для динамически загружаемых элементов. Мне нужно решить ту же проблему на многочисленных [страницах, и я не могу настроить таргетинг на какой-либо идентификатор, поскольку он меняется для каждого элемента.

Может ли кто-нибудь помочь мне решить эту проблему с помощью возможного подхода с использованием jQuery. Ценю вашу помощь.

ОБНОВЛЕНО:

После некоторого предложения от @barmar и @ f-CJ (спасибо вам обоим) я попробовал следующее:

Я пробовал ниже:

 var observer = new MutationObserver(function (mutations)
               {
                 mutations.forEach(function (mutation)
                 {
                   console.info(mutation.type);

                 // here I need get all elements with class "GTnumeric" and 
                 // change its "type" to be "tel" if its not "hidden"

                 // **please help me out here**
                 // code mentioned below 

                 });
                });

 var config = {
 childList: true,
 subtree: true
 };

 // Node, config
var targetNode = document.body;
observer.observe(targetNode, config);

Я не уверен, как снова сослаться на документ внутри цикла for, который выдает ошибку [Uncaught TypeError: t [i] .getAttribute не является функцией], когда я пытаюсь выполнить следующее:

пожалуйста, помогите мне здесь

     var elems = document.getElementsByClassName(".GTnumeric");
    for (var el in elems) {
        if (elems[el].getAttribute("type") != 'hidden') {
            elems[el].setAttribute("type", "tel");
        }
    }

Где в DOM загружен input?

f-CJ 09.08.2018 00:18

@ f-CJ загружается под элементом Да / Нет. Я ответил на твой вопрос?

chethandb 09.08.2018 00:25

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

Barmar 09.08.2018 00:27

Ни один из опубликованных вами кодов не имеет к этому отношения. Опубликуйте код, который загружает новые элементы, и мы покажем вам, где это происходит.

Barmar 09.08.2018 00:28

Если вы можете изменить метод загрузки input, это будет очень просто. Если вы не можете изменить метод загрузки input, мы можем предложить различные варианты, чтобы получить то, что вы хотите. Можете ли вы изменить метод загрузки input?

f-CJ 09.08.2018 00:31

@Barmar К сожалению, я не могу изменить логику, которая загружает новый элемент :(

chethandb 09.08.2018 00:36

@ f-CJ Нет, я не могу изменить метод загрузки ввода. Мне нужно найти решение с элементами, которые я разместил здесь.

chethandb 09.08.2018 00:37

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

Barmar 09.08.2018 00:41

@Barmar обязательно попробует и сообщит вам. Спасибо

chethandb 09.08.2018 00:50

@Barmar Я обновил то, что пробовал, с помощью MutationObserver, пожалуйста, посоветуйтесь дальше. Спасибо.

chethandb 09.08.2018 21:41
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
1
10
338
2

Ответы 2

Итак, если вы не можете изменить метод загрузки файла input, я вижу два возможных решения:

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

    $('div.btn-group > label').on('click', function(e) {        
        let $this = $(this);
    
        let interv = setInterval(function() {
            let gtNumeric = $this.siblings($(".GTnumeric").not("[type=hidden]")); 
    
            if (gtNumeric.length > 0) {
                gtNumeric.attr("type", "tel");
                clearInterval(interv);
            }
        }, 500);    
    });
    

Идея приведенного выше сценария состоит в том, чтобы проверить братьев и сестер label, по которым был выполнен щелчок, и проверить, есть ли один из них с классом .GTnumeric. Как только он будет найден, измените type элемента и очистите интервал. Ставлю интервал полсекунды (500), можете адаптировать под свои нужды.

  1. Используйте DOM Mutation Observer, вы можете проверить это Сообщение блога

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

chethandb 09.08.2018 00:51

@cheresdb не уверен, понятно ли я объяснил, есть вопросы?

f-CJ 09.08.2018 01:15

Спасибо за пример. Но есть одна проблема: моя стихия не является родным братом. Элемент вставляется под кнопкой, но не как родственный элемент, а как новый элемент строки.

chethandb 09.08.2018 06:21

@cheresdb Он добавляется как брат div.btn-group?

f-CJ 09.08.2018 18:58

Неа. Он добавляется как новый элемент div.row. Есть ли способ ссылаться на весь документ при возникновении события щелчка, чтобы проверить, добавлен ли элемент? Это должно решить проблему

chethandb 09.08.2018 19:25

@cheresdb Да, с Оберсервером мутации DOM: developer.mozilla.org/en-US/docs/Web/API/MutationObserver

f-CJ 09.08.2018 19:27

Я пробовал что-то с помощью Mutation Observer и в какой-то момент застрял. Я обновлю свой вопрос. Пожалуйста, помогите мне там. Большое спасибо за ваши ценные предложения до сих пор.

chethandb 09.08.2018 21:27

Поскольку я не уверен, как действовать дальше, я открыл новый вопрос об использовании MutationObserver в приведенной ниже ссылке.

Обсуждение перенесено здесь

Другие вопросы по теме