Question

首先，我要明确地说，我经过以下链接，但发现很难解决我的问题。 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>

以上所有代码（已删除最复杂的代码）显示了一个可点击的是/否字段，如this图片

回答是

时，below元素会动态加载到DOM上

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

方法：

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

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

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

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

任何人都可以通过jQuery使用一种可能的方法来帮助我解决此问题。感谢您的帮助。

已更新：

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

我在下面尝试过：

 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循环内再次引用该文档，从而引发错误[未捕获的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");
        }
    }

Answer 1

好的，因此，如果您无法修改加载input文件的方法，我会看到2种可能的解决方案：

添加一个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），您可以根据需要进行调整。

使用DOM突变观察器，您可以检查此blog post

Answer 2

由于我不确定如何进行操作，因此在下面的链接中打开了一个有关使用MutationObeserver的新问题。

讨论移至here

jQuery：在动态插入的输入元素上调用函数

2 个答案: