javascript - 函数未定义 WordPress jQuery

Question

我有一个 js 文件，里面有一个名为 showProduct 的函数。

在我的 HTML 文档中，我有一个提交按钮，其中包含以下 javascript:

onclick="showProduct(document.getElementById('suggest1').value);"

这获取 id 为 suggest1 的输入字段的值，然后传递 到函数 showProduct.这很好用!但是一旦我在 jquery 之前和之后添加这个:

(function($) { .... })(window.jQuery);

我得到:未捕获的ReferenceError:showProduct未在HTMLButtonElement.onclick中定义

关于如何让它发挥作用有什么想法吗？我需要将所有 jQuery 放入此函数中才能使其与 WordPress 一起使用。

谢谢

Answer 1

当您使用on*时您调用的函数的事件属性必须在 window 的范围内。当您将代码放入 IIFE 中时，情况就不再是这样了。

<button class="foo">Foo</button>

(function($) {
  $('.foo').click(function() {
    var value = $('#suggest1').val();
    // do something with the value here...
  });
})(window.jQuery);

这里需要注意的一件事是，单击按钮将提交任何父项 <form>元素，因此您可能需要 Hook 到 submit如果您不想立即提交该表单，则发生该事件。