jquery未检测到Ajax输入值更改答案

【问题标题】：Ajax input value change not detected by jqueryjquery未检测到Ajax输入值更改
【发布时间】：2019-11-18 16:57:12
【问题描述】：

我有一个带有重力表单表单（也使用 GF Populate Anything 附加插件）的站点，该站点使用 ajax 动态加载数据。我正在尝试向其中一个输入表单添加一个非常简单的 javascript 函数，但是当输入值动态变化时，jquery 函数不会检测到任何变化。该功能在我手动输入更改时起作用，但在动态更改时不起作用。这是我的 javscript 函数：

jQuery( document ).ready(function($) {

    $(document).on('change', '#input_3_17', function() {

        alert(  $("#input_3_17").val() );

        // my simple function here

    });

});

我无权访问控制 ajax 更改的代码——这是由另一个插件 (https://gravitywiz.com/documentation/gravity-forms-populate-anything/) 完成的。有什么方法可以让 jquery 在我自己的代码中检测到这种变化？

如果我手动更改输入数据，或者如果我使用 .val() 设置值，则会在页面加载时触发上述代码中的警报。

这是页面加载时 html 的样子：

<input name="input_17" id="input_3_17" type="text" value="" class="medium" aria-invalid="false" disabled="">

这是输入 html 在值更改后的样子：

<input name="input_17" id="input_3_17" type="text" value="6,160.00" class="medium" aria-invalid="false">

如果我进入

$("#input_3_17").val();

进入开发人员工具控制台，它会输出当前值——所以我知道 dom 正在发生变化，但我似乎无法访问它。我有哪些选择？这甚至可能吗？

更新：在直接联系我正在使用的自定义重力形式插件的插件作者后，GF Populate Anything，他们提供了所需的自定义事件。请参阅下面的答案。

【问题讨论】：

换句话说，您需要重力表单来监控您输入的更改，从而导致重力表单提交更改。对吗？
或者，您是在问如何检测插件对输入所做的更改？不是手动更改？因为...这不是更改事件的用途。
是的，我需要检测插件对输入所做的更改（它使用 ajax 所做的）。我不需要更改输入值——我的 javascript 函数不会更改提交的数据。
重复帖子中可用的解决方案未检测到值的任何动态变化。它正在检测代码中设置的值（input.value = 'foo';），但没有检测到任何动态更新的值。
The jQuery docs for .change() 说：注意：使用 JavaScript 更改输入元素的值，例如使用 .val()，不会触发事件。 所以你的处理程序永远不会检测到来自 AJAX 和 JS 的变化。你需要听别的东西。 Some searching turned up 提到 gform_post_render()，也许有帮助？

标签： javascript jquery ajax wordpress gravity-forms-plugin

【解决方案1】：

所以我联系了 Gravity Perks 附加插件 GF Populate Anything 的插件开发人员，这里有完美的响应：

在 GP Populate Anything 使用 AJAX 更新字段后，它会启动以下事件：

$(document).trigger('gppa_updated_batch_fields', this.formId);

您应该能够像这样挂钩该事件：

$(document).on('gppa_updated_batch_fields', function(event, form_id){
   console.log(form_id);
   $('#input_' + form_id + '_' + input_id).css('background', 'red');
});

【讨论】：

【解决方案2】：

如果我理解正确，您可以使用它。
这个脚本每次都会触发。更多信息请参阅 GF 文档here

(function($) {
  $(document).on('gform_post_render', function(event, form_id, current_page){

  // Add you jQuery here

  });
})(jQuery);

【讨论】：

这对我的表单不起作用，可能是因为我还在使用自定义重力表单附加插件。我使用了由他们与我共享的开发人员创建的自定义事件挂钩，gppa_updated_batch_fields