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

Question

我試圖在單擊按鈕時調用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;
    }
});

如果你們幫我解決這個問題，我感激不盡。

謝謝！

Answer 1

似乎是一個范圍問題。 您已經在另一個函數中定義了該函數。 你還應該盡量避免將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混合在JS中並將其放在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));

Answer 2

你應該將函數定義outside的的document.ready回調($(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;
}

你在$(function() {}放置的所有東西都是在DOM准備就緒時執行的，但是它的作用域是私有的。

另一方面，如果你想使用不引人注目的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>

然后使用文檔就緒回調來不引人注意地訂閱這些按鈕的.click事件：

$(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);
    });
});