首页 文章

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

提问于
浏览 次
2

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

作为独立页面，一切正常，但转换为Wordpress页面时，jQuery click事件不再触发 .

我的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库我在 Headers 中加载我的.js这是问题出现的原因，因为在调用任何脚本之前需要加载库，原因很明显 .

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

jquery wordpress

2 回答

  • 0

    尝试：

    if (text != 'undefined')

    要么

    if (text != null)

    有关AJAX示例，请参阅here .

    EDIT:

    在单击功能中取出选择器前的'button' . （#convert，not button #convert）另请查看.find

    确保将jquery包含在HTML正文中 . 请尽可能包括小提琴 .

    我过去也遇到过Jquery（）的问题;像这样写你的代码：

    $(document).ready(function(){
// etc etc
$('#convert').click( //etcetc
    回复于
  • 5

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

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

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

    回复于

相关问题