jQuery:在动态插入的输入元素上调用函数 [英] jQuery: to call a function on dynamically inserted input elements

问题描述

首先，我要说清楚，我通过以下链接，但发现很难解决我的问题. Link1 ， Link3

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

回答是

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

方法:

Approach:

需要将已加载的输入元素的类型从文本更改为tel.

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

对于加载到DOM的所有元素，我都有以下内容，这对于最初加载的元素非常有用:

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");
 });

但是我发现很难使它适用于动态加载的元素.我需要在众多[页面上解决相同的问题，并且我无法针对任何ID，因为每个ID都会发生变化.

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.

任何人都可以通过jQuery用一种可能的方法来帮助我解决这个问题.感谢你的帮助.

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

已更新:

UPDATED:

在@barmar和@ f-CJ提出一些建议之后(谢谢你们俩)，我尝试了以下方法:

After some suggestion from @barmar and @f-CJ (Thanks to both of you), I have 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);

当我尝试以下操作时，我不确定如何在for循环内再次引用该文档，并抛出错误[Uncaught TypeError:t [i] .getAttribute is a function].

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:

请在这里帮助我

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

推荐答案

由于我不确定如何进行操作，因此在下面的链接中对使用MutationObeserver提出了一个新问题.

Since I am not sure how to proceed, I have opened a new question on using MutationObeserver in the below link.

讨论移至此处

这篇关于jQuery:在动态插入的输入元素上调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！