Wordpress 搜索在按钮单击时不起作用

Question

我正在尝试使用下面的 jQuery 代码在按钮单击打开弹出窗口时进行搜索

jQuery(function($) {
  $('#secondaryButton').click(function() {
    alert("The paragraph was clicked.");
    $("button.elementor-search-form__submit").click();
  });
});

我尝试在 header.php 中添加脚本代码它不起作用 我还尝试使用 elementor pro 插件在页面级别的自定义 js 中添加脚本代码，它不起作用

我不确定为什么脚本不起作用。我正在工作的链接是

https://adelaidebuildingconsulting.com.au/

单击搜索图标后，将打开一个弹出窗口，我希望通过单击“搜索”按钮实现搜索。任何帮助将不胜感激。

Answer 1

您的代码中有两个问题。首先，当页面加载时，包含#secondaryButton 元素的右侧面板在 DOM 中不存在，因此您需要使用委托事件处理程序。

其次，您需要直接在button 元素上调用click() 方法，而不是通过jQuery。为此，请使用 [0] 从 jQuery 对象中检索元素：

$("button.elementor-search-form__submit")[0].click();

但是，在这种情况下，提交form 元素的更好做法是在该元素上调用submit 事件，而不是单击其按钮：

jQuery(function($) {
  $(document).on('click', '#secondaryButton', e => {
    $("form.elementor-search-form")[0].submit();
  });
});

话虽如此，最佳做法是完全消除任何 JS 黑客在您的 form 和外部提交按钮之间建立关系的需要。如果您重新排列您的 HTML 以便可点击的“搜索”元素是 form 中的 <button /> 元素，那么您将获得默认情况下所需的行为，而无需任何 JS。