jQuery单击事件不工作在WordPress的页面

我一直在尝试几个小时现在弄清楚为什么我的jQuery代码不能在Wordpress中作为页面添加时工作。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。

来源

2013-03-18 coolmine

是您的事件是否触发（检查控制台）时引发的任何错误？ – CodePB 2013-03-18 22:57:57

错误：ReferenceError：未定义jQuery 源文件：.../scripts/functions.js Line：1。 jquery在noConflict上。如果上面的代码不是用于noConflict，则会抛出相同的错误，但为$。这是头文件中的js代码 – coolmine 2013-03-18 23:04:02

感谢控制台提醒pburgess，它确实有助于查明问题。 – coolmine 2013-03-18 23:25:58

这个问题似乎是在代码的东西少向前伸直，然后错误。 Wordpress插件之一是强制大部分.js文件加载页脚，而不是标题，以改善加载时间。

问题是我正在加载我的.js文件的头部，导致我的JavaScript代码在加载jquery库之前被执行导致出错。

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

来源

2013-03-19 15:10:20 coolmine

这是我的问题的解决方案。我正在通过wp_enqueue_script（'前端'，plugins_url（'/ js/frontend.js'，__FILE__），数组（'jquery'）和add_action（'wp_enqueue_scripts'...）在我的WordPress插件中加载JavaScript。加载AFTER jQuery，尽管使用wp_enque，是用wp_enqueue_script（'frontend'，plugins_url（'/ js/frontend.js'，__FILE__），array（'jquery'），false，true）替换第一个代码片段;最后一个'真'标志加载我的脚本最后http://codex.wordpress.org/Function_Reference/wp_enqueue_script – possiblyLethal 2014-10-10 07:40:03

尝试：

if (text != 'undefined')

或

if (text != null)

见here AJAX的例子。

编辑：

在点击功能选择之前取出的 '按钮'。（＃转换，而不是按钮＃转换）另外检查出.find

请确保你包括你的jQuery在HTML的主体。请尽可能包括小提琴。我已经在过去的问题与Jquery（）;我不知道如何解决这个问题。写你的代码是这样的：

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

来源

2013-03-18 22:58:30 greycode

不幸的是，即使警报弹出，所以问题发生在该行之前。 – coolmine 2013-03-18 23:00:48

@coolmine检查更新回答 – greycode 2013-03-18 23:10:19

这不是问题，将更新我的问题是什么问题。 – coolmine 2013-03-18 23:15:18

jQuery单击事件不工作在WordPress的页面

回答

相关问题