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

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

问题：

我在页面上加载了以下内容：

   Yes    No   

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

当回答“是”时，以下元素将动态加载到DOM

做法：

需要将加载的输入元素的类型从text更改为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循环中再次引用该文档，当我在下面尝试时抛出错误[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"); } } 

Answer 1

好的，所以如果你不能修改加载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），你可以根据自己的需要进行调整。

2. 使用DOM Mutation Observer，你可以查看这篇博文

Answer 2

由于我不确定如何继续，我在下面的链接中打开了一个关于使用MutationObeserver的新问题。

讨论转到了这里