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文件是否在标头中正确加载，以及jquery库也是如此。我错过了什么吗？提前谢谢。

编辑：我发现问题是什么，Wordpress在页脚中加载jquery库，我在标题中加载了我的.js，这是问题出现的原因，因为在调用任何脚本之前需要加载库原因很明显。

$ .ajax也应该是noConflict模式下的jQuery.ajax。

Answer 1

问题似乎是不那么直接然后代码中的错误。其中一个Wordpress插件强制大多数.js文件在页脚中加载而不是在标题中加载，据说可以改善加载时间。

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

解决方法是确保我的.js文件已加载到页脚中，这可以通过将add_action('wp_head', '<js method>');更改为add_action('wp_footer', '<js method>');来实现。代码中也有一个小错误。当jquery处于无混乱模式时，$.ajax应为jQuery.ajax。

Answer 2

尝试：

if (text != 'undefined')

或

if (text != null)

有关AJAX示例，请参阅here。

修改

在点击功能中取出选择器前的“按钮”。（#convert，not button＃convert）同时查看.find

确保将jquery包含在HTML正文中。如果可能请包括小提琴。

我过去也遇到过Jquery（）;写下你的代码：

$(document).ready(function(){ // etc etc $('#convert').click( //etcetc

jQuery单击事件无法在Wordpress页面中运行

2 个答案: