不能在wordpress中调用javascript函数

Cannot call javascript function in wordpress

本文关键字：javascript 函数 调用 wordpress 不能      更新时间：2023-09-26

这可能是基本的，但这个问题花了我几个小时来弄清楚，我还没有找到任何解决方案。我使用Wordpress 3.5，我有一个名为general.js的外部javascript文件在这个文件夹中:wp-content/themes/[folder_name]/js。在general.js中，我编写了一个名为hideError的函数，主要用于隐藏从文本框中弹出的错误标签。

(function($) {
function hideErrorLabel(i) {
    //codes for handling label
}
})(jQuery);

我这样称呼它:

<span class="component-wrapper" onmouseover="hideErrorLabel(0)">
    <input type="text" name="txtName" size="10" />
    <label for="txtName" class="error">All field must be filled.</label>
</span>

传递一个参数，因为这些文本框是数组。奇怪的是，它给了我javascript错误"hideErrorLabel未定义"。出了什么问题?请帮助。

(function($) {
 /* code */
})(jQuery);

将确保在解析DOM之后执行您提供的/* code */。然而，当解析器试图解释onmouseover属性时，这将阻止hideErrorLabel被定义。

为了解决这个问题，您应该使用修改您的事件处理程序也在/* code */部分:

(function($) {
function hideErrorLabel(i) {
    //codes for handling label
}
$('.component-wrapper').on('mouseover',hideErrorlabel);
})(jQuery);

删除javascript代码的第一行和最后一行。你在隐藏你的函数!在任何脚本标签中公开声明。

<script type="text/javascript>
function hideErrorLabel(i) {
  //codes for handling label
}
</script>

发生这种情况的原因有几个，最安全但并非最简单的答案是将事件绑定移到代码中。您还可以使用委托，如果您只是想要确定函数的作用域，则不需要索引。如果您确实需要索引，您可以隐式获取位置，或者使用数据集值通过PHP显式提供一个。

听起来你只需要这样的东西:

(function($) {
  $(function() {
    $(document).on('mouseover', '.component-wrapper', function(event) {
      var $wrapper = $(event.currentTarget);
      $wrapper.find('.error').hide();
    });
  });
})(jQuery);

但是您可以根据需要调整它以调用外部函数或提供额外的逻辑。

相关文章：