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的頁面

回答

相關問題