2

我已经尝试了几个小时来弄清楚为什么我的 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。

4

2 回答 2

5

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

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

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

于 2013-03-19T15:10:20.600 回答
0

尝试：

if (text != 'undefined')

或者

if (text != null)

有关 AJAX 示例，请参见此处。

编辑：

在点击功能中取出选择器之前的“按钮”。（#convert，而不是按钮#convert）另请查看.find

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

我过去也遇到过 Jquery(); 的问题。像这样编写代码：

$(document).ready(function(){
// etc etc
$('#convert').click( //etcetc
于 2013-03-18T22:58:30.903 回答