jQuery 单击事件在 Wordpress 页面中不起作用

Question

我已经尝试了几个小时来弄清楚为什么我的 jquery 代码在作为页面添加到 Wordpress 中时不起作用。

作为独立页面，一切工作正常，但是当转换为 Wordpress 页面时，jQuery 单击事件不再触发。

我的 jQuery 代码目前如下所示:

jQuery(document).ready(function() {
    jQuery('button#convert').click(function() {
        alert("test");
        var text = jQuery('textarea#textInput').val();
        var method = jQuery('select#methodOptions').val();

        if (text!='')
        {
            $.ajax({
                url: 'core/convert.php',
                type: 'POST',
                data: 'data=' + text + '&method='+ method,
                dataType: 'html',
                success: function( message) {
                    jQuery('textarea#textOutput').val(message);
                }
            });
        }
    });
});

我的按钮在 html 中看起来像这样

<button id="convert" class="convertbutton" type="button">Convert</button>

我还可以验证包含上述脚本的 .js 文件是否在 header 中正确加载，并且 jquery 库也是如此。我错过了什么吗？提前致谢。

编辑:我发现问题是什么，Wordpress 正在页脚中加载 jquery 库，而我正在页眉中加载 .js，这就是出现问题的原因，因为在调用任何脚本之前需要加载该库出于显而易见的原因。

此外，$.ajax 应该是 noConflict 模式下的 jQuery.ajax。

Answer 1

这个问题似乎不像代码中的错误那么直接。 Wordpress 插件之一强制大多数 .js 文件加载到页脚而不是页眉中，据说是为了缩短加载时间。

问题是我在 header 中加载 .js 文件，这导致我的 javascript 代码在加载 jquery 库之前执行，从而导致错误。

解决方案是确保我的 .js 文件加载到页脚中，这可以通过更改 add_action('wp_head', '<js method>'); 来完成。至add_action('wp_footer', '<js method>'); 。代码中还存在一个小错误。当jquery处于无冲突模式时$.ajax应该是jQuery.ajax .