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

您应该移动document.ready callback outside的函数定义($(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;
}

当你准备好DOM但是它的范围是私有的时，你在$(function() {}内放置的所有内容都会被执行。

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

未捕获的ReferenceError：函数未定义jQuery

2 个答案: