未捕獲的ReferenceError：函數未定義jQuery

我試圖在點擊按鈕時調用jQuery函數。但我得到的錯誤如下：未捕獲的ReferenceError：函數未定義jQuery

未捕獲的ReferenceError：update_question_ajax沒有定義

HTML：

<button type="button" class="update-question-<?php echo $i; ?> button" onclick="update_question_ajax(<?php echo $i; ?>)" style="outline: 0 none;"><?php _e('Update') ?></button>

的jQuery：

$(function(){ 
    function update_question_ajax(id) 
    { 
     var test = $('.edit-question-' + id + ' input[name="translated"]'); 
     var editedQuestionId = $('#question-id-'+id).val(); 
     var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(); 
     var modalObj = $('#myQuestionModal'); 

     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url('admin/question/admin_edit_question'); ?>", 
      data:{ 
       edited_question: editedQuestionObj, 
       question: editedQuestionId 
      }, 
      success: function(){ 
       modalObj.dialog('close'); 
       modalObj.html(''); 
      }, 
      complete: function(){ 
       //window.location.reload(true); 
      } 
     }); 
     return false; 
    } 
});

我很感激，如果你們幫我了對這個。

謝謝！

來源

2014-03-29 curiozity

您需要在HTML之前加載JavaScript代碼。你在文件末尾有沒有，不是嗎？ – Lucio

我使用MVC模式和腳本在視圖中。 – curiozity

似乎是一個範圍問題。您已經在另一個函數中定義了函數。你也應該儘量避免把php放在javascript裏面。從技術上講，它是有效的，但不是很好的形式。

刪除了內聯點擊處理程序。

<button type="button" class="update-question button" data-id="<?php echo $i; ?>" style="outline: 0 none;"><?php _e('Update') ?></button>

然後我們創建一個自執行的函數，作爲$這給用「$」作爲jQuery的能力內的一切通過jQuery的。然後爲按鈕定義你的點擊處理程序，並使用數據屬性來傳遞id，而不是使用混合在JS中的PHP並將其放置在DOM中。只是覺得一點點清潔。另外，確保在文檔底部加載jquery /其他腳本，就在關閉主體之前。這樣你就不需要.ready了，因爲你的文檔已經被加載了。

(function($){ 
    // Define click handler. 
    $('button.update-question').on('click', function(e){ 
     e.preventDefault(); 
     var id = $(this).data('id'); 

     update_question_ajax(id); 
    }); 

    function update_question_ajax(id) { 
     var test = $('.edit-question-' + id + ' input[name="translated"]'), 
      editedQuestionId = $('#question-id-'+id).val(), 
      editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(), 
      modalObj = $('#myQuestionModal'); 

     $.ajax({ 
      type: "POST", 
      url: "YOURURL", 
      data:{ 
       edited_question: editedQuestionObj, 
       question: editedQuestionId 
      }, 
      success: function(){ 
       modalObj.dialog('close'); 
       modalObj.html(''); 
      }, 
      complete: function(){ 
       //window.location.reload(true); 
      } 
     }); 
    } 

}(jQuery));

來源

2014-03-29 22:36:40 xCNPx

這麼好的解釋！我會接受這個答案。但我有一個問題。點擊處理程序（button.update-question）不會觸發事件。 – curiozity

你有沒有將你的JS代碼加載到文檔的中，或者在文檔的最後附近的末尾加載了？如果它在頭部，該函數在加載DOM之前觸發，所以元素沒有被正確地綁定到事件處理程序。嘗試將您的引用移至關閉body標籤上方的JQ，然後在上面的代碼中添加另一個

你應該移動的document.ready回調($(function() { ... }）的函數定義outside：當DOM準備好，但不會對外公開，它的範圍你把$(function() {}內

function update_question_ajax(id) { 
    var test = $('.edit-question-' + id + ' input[name="translated"]'); 
    var editedQuestionId = $('#question-id-'+id).val(); 
    var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(); 
    var modalObj = $('#myQuestionModal'); 

    $.ajax({ 
     type: "POST", 
     url: "<?php echo base_url('admin/question/admin_edit_question'); ?>", 
     data:{ 
      edited_question: editedQuestionObj, 
      question: editedQuestionId 
     }, 
     success: function(){ 
      modalObj.dialog('close'); 
      modalObj.html(''); 
     }, 
     complete: function(){ 
      //window.location.reload(true); 
     } 
    }); 
    return false; 
}

一切都被執行。

如果在另一方面，你想用不顯眼的JavaScript，然後擺脫這種onclick屬性從您的標記：

<button type="button" class="button update-question-<?php echo $i; ?>" dtaa-id="<?php echo $i; ?>" style="outline: 0 none;"><?php _e('Update') ?></button>

，然後使用文檔準備回調悄悄訂閱的。點擊事件這些按鈕：

$(function() { 
    function update_question_ajax(id) { 
     var test = $('.edit-question-' + id + ' input[name="translated"]'); 
     var editedQuestionId = $('#question-id-'+id).val(); 
     var editedQuestionObj = $('.edit-question-' + id + ' input[name="translated"]').val(); 
     var modalObj = $('#myQuestionModal'); 

     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url('admin/question/admin_edit_question'); ?>", 
      data:{ 
       edited_question: editedQuestionObj, 
       question: editedQuestionId 
      }, 
      success: function(){ 
       modalObj.dialog('close'); 
       modalObj.html(''); 
      }, 
      complete: function(){ 
       //window.location.reload(true); 
      } 
     }); 
     return false; 
    } 


    $('.button').click(function() { 
     var id = $(this).data('id'); 
     return update_question_ajax(id); 
    }); 
});

來源

2014-03-29 22:09:55

其實這是有效的。但在這種情況下，input.val（）;返回未定義或空字符串。所以我在尋找，並發現了一些內容：「在document.ready中移動函數定義」。我真的很困惑！ – curiozity

你得到未定義的原因是你使用了一個id選擇器：'$（'＃question-id - '+ id）'但你的按鈕甚至沒有'id'屬性。確保你的DOM中有一個相應的元素和這個ID。 –

達林最後一個問題：我使用下面的選擇器獲取輸入值： var editedQuestionObj = $（'。edit-question-'+ id +'input [name =「translated」]'）。val（）; 我試圖觸發這個事件按鈕onclick。我的按鈕的id屬性和選擇器之間的連接是什麼？ – curiozity

相關問題

未捕獲的ReferenceError：函數未定義jQuery

回答

相關問題