自定义 jQuery 不适用于 Wordpress Ninja Forms 插件

Posted 2023-05-08

【中文标题】自定义 jQuery 不适用于 Wordpress Ninja Forms 插件

【英文标题】：Custom jQuery not working on Wordpress Ninja Forms plugin

【发布时间】：2017-04-14 00:39:21

【问题描述】：

当我想添加影响表单的自定义 jQuery 代码时遇到了一些问题。

例如，当有人单击输入或单选按钮时，另一个输入或元素将被隐藏或显示。我试图在单击或其他内容时获得类似 console.log('trigger'); 的结果，但在开发中没有。控制台出现了。另外，我尝试了以下方法：

使用.on('click', function()... 调用click 事件或使用.trigger('click'); 调用事件，或将事件更改为change

将脚本嵌入到来自忍者表单的文件中，或者将其放在页面内footer.php 中body 标记的结尾处

要更改 jQuery 的开始声明以在这样的函数中工作：(function($) $(document).ready(function().....

我知道我可以尝试另一个插件，我尝试了一个并且自定义 jQuery 工作，但我真的很喜欢这个，不知道为什么会这样......

谢谢

【问题讨论】：

你有没有设法让它工作？

是的，我当时确实设法以某种方式解决了这个问题，感谢您的回复！我也看到这个答案帮助了更多的人，继续努力！

【参考方案1】：

不确定您是否需要这方面的帮助，因为您发布问题已经有一段时间了，但这可能会对将来的其他人有所帮助。我遇到了相同/类似的问题，无法在 Ninja Forms 上运行 JS/jQuery，发现这是因为 Ninja Forms 异步加载表单。因此，当您的 document.ready 函数运行时，表单还不存在并且无法绑定。

Ninja Forms 有自己的事件就绪状态，可以按如下方式使用：

jQuery(document).on( 'nfFormReady', function( e, layoutView ) 
    // Your code goes here...
);

【讨论】：

谢谢。我花了太长时间试图找到那个......这是在某个地方的 NF 文档中吗？

抱歉，我不确定它是否在文档中，因为他们的网站目前似乎已关闭。但是，我想我实际上在 GitHub 页面上找到了对它的引用：github.com/wpninjas/ninja-forms/issues/2436，然后在 Google 上搜索了使用中的nfformReady 的示例。

@JoelWorsham - NinjaForms 网站现在似乎重新启动并运行。但是，我搜索并搜索了他们的文档和 codex，但那里似乎没有任何对 nfFormReady 事件的引用......所以我一定是从上面的 Github 页面上的示例中得到的。

添加到此以允许在 IF 语句中使用 $ 的最佳解决方案是什么？

@Lee - 你指的是什么 IF 语句？你不能只使用jQuery 而不是$ 吗？ - 如果你真的需要使用$，那么请查看：***.com/questions/6635600/…

【参考方案2】：

事件未注册仅仅是因为您尝试绑定该事件的元素当时还不存在（在文档加载时）。 Ninja 表单异步加载表单内容，因此您必须等到表单完全加载后再添加事件侦听器。 这对我有用：

var formExists = setInterval(function() 
  if ($(".nf-form-cont").length) 
    // Set your event listeners here, example:
    $("#nf-field-1").click(function(e) 
      console.log("click!");
    
    clearInterval(formExists);
  
, 100); // check every 100ms

【讨论】：

我不知道为什么这被否决了。诚然，这不是官方支持的“就绪”事件，但是我使用过的其他库不提供“就绪”或“加载”事件，我已经完成了这种方法。即使更好的答案是使用 NF 内置的答案，它仍然是一个有效的答案。