jQuery: to call a function on dynamically inserted input elements

问题

First of all I will make it clear, that I went through the below link and yet found it difficult to address my issue. Link1, Link2, Link3

Issue:

I have the below loaded on my page:

<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>

All the above code (most complex code removed) displays a clickable Yes/No field as in this image

The below element gets loaded dynamically on to DOM when answered YES

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

Approach:

Need to change the type of the loaded input element from text to tel.

I have the below for all elements loaded on to DOM which works great for elements loaded initially:

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

But I am finding it difficult to make it work for the dynamically loaded elements. I need to address the same issue on numerous [pages and I cannot target on any ID since it changes for every element.

Can anyone please help me solve this with a possible approach using jQuery. Appreciate your help.

UPDATED:

After some suggestion from @barmar and @f-CJ (Thanks to both of you), I have tried below:

I tried below:

 var observer = new MutationObserver(function (mutations)
               {
                 mutations.forEach(function (mutation)
                 {
                   console.log(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);

I am not sure how to refer the document again inside the for loop its throwing an error [Uncaught TypeError: t[i].getAttribute is not a function] when I try below:

please help me out here

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

回答1:

Ok, so if you cannot modify the method that loads the input file, I see 2 possible solutions:

Add a click event handler and periodically check until the new sibling element has been added -> modify it.

$('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);    
});

The idea of the above script is to check siblings of the clicked label and check if there is one with the class .GTnumeric. Once it is found, change the type of the element and clear the interval. I put an interval of half a second (500), you can adapt it to your needs.