如何在jQuery中动态获取运行时创建的指定隐藏输入框变更值？

问题描述 #

需要监听name属性匹配./links/item{数字}/./locationPath模式的隐藏input字段的创建、修改、删除操作，获取其值并发起AJAX请求。但这些foundation-autocomplete组件及内部的隐藏输入框都是运行时动态生成（数量1~20个），直接绑定change或input事件的静态选择器代码完全无效。

用户尝试的无效代码 #

$(document).ready(function() {
  // Listen for changes to input fields with matching name pattern
  $('input[name^="./links/item"][name$="/./locationPath"]').on('input', function() {

    // Get the value of the changed input field
    var changedValue = $(this).val();
    alert(changedValue);
    // Make an AJAX request with the retrieved value

  });
});

解决方案 #

为什么之前的代码失效？ #

在$(document).ready()执行时，动态生成的foundation-autocomplete和内部隐藏input还未被插入DOM，此时直接选择元素绑定事件，只会绑定到当时已存在的元素，后续生成的元素不会继承事件绑定。必须使用事件委托来处理动态元素的事件。

方法1：通过jQuery事件委托监听组件或输入框事件 #

监听隐藏input的变更（兼容修改场景）

$(document).ready(function() {
  // 事件委托：将事件绑定到document，捕获动态生成的input的change事件
  $(document).on('change', 'input[name^="./links/item"][name$="/./locationPath"]', function() {
    const changedValue = $(this).val();
    console.log('隐藏输入框变更值:', changedValue);
    // 发起AJAX请求示例
    // $.ajax({
    //   url: '/your-api-endpoint',
    //   method: 'POST',
    //   data: { pathValue: changedValue },
    //   success: function(res) {
    //     // 处理响应逻辑
    //   }
    // });
  });
});

监听Coral组件原生事件（覆盖创建/删除/修改全场景）

foundation-autocomplete和coral-taglist是Coral UI组件，会触发原生事件，直接监听这些事件更可靠：

$(document).ready(function() {
  // 监听foundation-autocomplete的change事件（值修改时触发）
  $(document).on('change', 'foundation-autocomplete[name^="./links/item"][name$="/./locationPath"]', function() {
    const currentValue = $(this).val();
    console.log('Autocomplete值变更:', currentValue);
    // 发起AJAX请求
  });

  // 监听标签的添加/删除事件（对应隐藏input的创建/删除）
  $(document).on('coral-taglist:add coral-taglist:remove', 'coral-taglist[name^="./links/item"][name$="/./locationPath"]', function() {
    const targetInput = $(this).find('input[name^="./links/item"][name$="/./locationPath"]');
    const currentValue = targetInput.val() || '';
    console.log('标签变更后的值:', currentValue);
    // 发起AJAX请求
  });
});

方法2：用MutationObserver监听属性变化 #

如果需要捕获所有属性变更场景，可以使用MutationObserver监听元素的value属性变化：

$(document).ready(function() {
  // 配置观察器选项：只监听value属性变化
  const observerConfig = { attributes: true, attributeFilter: ['value'] };

  // 定义属性变更后的回调逻辑
  const observerCallback = function(mutationsList) {
    for(let mutation of mutationsList) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
        const changedValue = mutation.target.value;
        console.log('属性变更值:', changedValue);
        // 发起AJAX请求
      }
    }
  };

  // 创建观察器实例
  const observer = new MutationObserver(observerCallback);

  // 当新的foundation-autocomplete插入DOM时，启动对内部隐藏input的观察
  $(document).on('DOMNodeInserted', 'foundation-autocomplete[name^="./links/item"][name$="/./locationPath"]', function() {
    const targetInput = $(this).find('input[name^="./links/item"][name$="/./locationPath"]')[0];
    if (targetInput) {
      observer.observe(targetInput, observerConfig);
    }
  });
});

关键提示 #

• 优先使用组件原生事件（foundation-autocomplete的change、coral-taglist的标签事件），这是最稳定的方案，组件内部状态变更时会主动触发这些事件。
• 事件委托的父元素尽量选择离目标元素最近的静态容器（而非document），可以减少事件冒泡的性能损耗。
• MutationObserver适合监听所有属性变更场景，但代码复杂度稍高，根据实际需求选择。

内容的提问来源于stack exchange，提问作者Prashanth A