Question

为什么以下脚本运行不正常？

$(document).ready和window.onload之外的函数无法调用函数，就像刷新页面一样。我习惯了剧本，没关系......

$(function () {
    $('.media-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bSort": true,
        "bInfo":true,
        "iDisplayLength": 10,
        "aoColumnDefs": [{"bSortable": false,
                        "aTargets": [ -1]}],
        "bServerSide":true,
        "sAjaxSource": 'module/view/dataMember.php',
        "sPaginationType": "full_numbers",
        "sDom": '<"datatable-header"fl>t<"datatable-footer"ip>',
        "oLanguage": {
            "sSearch": "<span>Search:</span> _INPUT_",
            "sLengthMenu": "<span>Show entries:</span> _MENU_",
            "oPaginate": { "sFirst": " First ", "sLast": " Last ", "sNext": " Next ", "sPrevious": " Prev " }
        },
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ 0, 4 ] }
        ]
    });
});

function rad(){
    var url = "module/master/element.php";
    var form_data = {
        is_ajax: 'radPackage',
    };
    $.ajax({
        type: "POST",
        url: url,
        data: form_data,
        success: function(str)
        {
            $('#radPackageEdit').html(str);
        }
    });
    return false;
}

window.onload = function() {
    rad();
};

function actDetail(Object){
    alert(Object);
    var url = "module/master/controller.php";
    var form_data = {
        ident : Object,
        is_ajax: 'viewer',
        content: 'member'
    };
    $.ajax({
        type: "POST",
        url: url,
        data: form_data,
        success: function(msg)
        {
            data = msg.split("|");
            alert(data);
            $("#idMemberDetail").val(data[0]);
            $("#ktpDetail").val(data[1]);
            $("#nameDetail").val(data[2]);
            $("#address1Detail").val(data[3]);
            $("#genderDetail").val(data[4]);
            $("#telephoneDetail").val(data[5]);
            $("#packageNameDetail").val(data[6]);
            $("#smsServiceDetail").html(data[8]);
            $("#saldoDetail").val(data[7]);
            $("#expiredDetail").html(data[9]);
            $('#modalDetail').modal('show');
        }
    });
    return false;
}

function delDetail(Object){
    alert(Object);
    var url = "module/master/controller.php";
    var form_data = {
        ident : Object,
        is_ajax: 'viewer',
        content: 'member'
    };
    $.ajax({
        type: "POST",
        url: url,
        data: form_data,
        success: function(msg)
        {
            data = msg.split("|");
            alert(data);
            $("#idMemberDelete").val(data[0]);
            $("#ktpDelete").val(data[1]);
            $("#nameDelete").val(data[2]);
            $('#modalDelete').modal('show');
        }
    });
    return false;
}

function actEdit(Object){
    var url = "module/master/controller.php";
    var form_data = {
        ident : Object,
        is_ajax: 'viewer',
        content: 'member'
    };
    $.ajax({
        type: "POST",
        url: url,
        data: form_data,
        success: function(msg)
        {
            data = msg.split("|");
            alert(data);
            $("#idMemberEdit").val(data[0]);
            $("#ktpEdit").val(data[1]);
            $("#nameEdit").val(data[2]);
            $("#address1Edit").val(data[3]);
            $("#genderEdit").val(data[4]);
            $("#telephoneEdit").val(data[5]);
            $("#radPackageEdit").val(data[11]);
            $("#smsServiceEdit").val(data[10]);
            $("#saldoEdit").val(data[7]);
            $('#modalEdit').modal('show');
        }
    });
    return false;
}

function actDel(){
    var url = "module/master/controller.php";
    var form_data = {
        ident : $.trim($('#idMemberDelete').val()),
        is_ajax: 'delete',
        content: 'member'
    };
    $.ajax({
        type: "POST",
        url: url,
        data: form_data,
        success: function(data)
        {
            if (data==1){
                delSukses();
                $(".media-table").dataTable().fnDraw();
                clearAll();
            }
            else if(data==0){
                delGagal();
            }
            else{
                inpoServer();
            }
        }
    });
    return false;
}

function clearAll(){
    alert('cleardata');
    $("#idMemberDelete").val('');
    $("#nameDelete").val('');
    $("#ktpDelete").val('');
}

function delSukses(){
    $.jGrowl('Data berhasil dihapus!', {
        life: 3000,
        theme: 'growl-success',
        header: 'Success!'
    });
}
function delGagal(){
    $.jGrowl('Data gagal dihapus!', {
        life: 3000,
        theme: 'growl-error',
        header: 'Failed!'
    });
}
function inpoServer(){
    $.jGrowl('Server error, connection timeout!', {
        life: 3000,
        theme: 'growl-warning',
        header: 'Timeout!'
    });
}
function attention(){
    $.jGrowl('Diminta berhati-hati dalam melakukan perubahan dan penghapusan data.', {
        life: 3000,
        theme: 'growl-warning',
        header: 'Perhatian!'
    });
}

function editDetail(){
     var ident = $("#idMemberDetail").val();
     actEdit(ident);
}

$(document).ready(function(){
    $('#formEdit').submit(function(){
        var url = "module/master/controller.php";
        var form_data = {
            idMember : $.trim($('#idMemberEdit').val()),
            name : $.trim($('#nameEdit').val()),
            ktp : $.trim($('#ktpEdit').val()),
            address1 : $.trim($('#address1Edit').val()),
            gender : $.trim($('#genderEdit').val()),
            phone : $.trim($('#telephoneEdit').val()),
            paketGym : $.trim($('#radPackageEdit').val()),
            smsService : $.trim($('#smsServiceEdit').val()),
            saldo : $.trim($('#saldoEdit').val()),
            is_ajax: 'edit',
            content: 'member'
        };
        $.ajax({
            type: "POST",
            url: url,
            data: form_data,
            success: function(data)
            {
                alert(data);
                if (data==1){
                    addSukses();
                    $(".media-table").dataTable().fnDraw();
                    $('#modalEdit').modal('hide');
                    clearAll();
                  }
                else if(data==2){
                    addData();
                }
                else if(data==0){
                    addGagal();
                }
                  else{
                    inpoServer();
                  }
            }
        });
        return false;
    });

    function clearAll(){
        $("#idMemberEdit").val('');
        $("#nameEdit").val('');
        $("#ktpEdit").val('');
        $("#address1Edit").val('');
        $("#telephoneEdit").val('+62');
        $("#saldoEdit").val('0');
    }

    function addSukses(){
        $.jGrowl('Data yang Anda Masukkan berhasil disimpan!', {
            life: 3000,
            theme: 'growl-success',
            header: 'Success!'
        });
    }
    function addGagal(){
        $.jGrowl('Data yang Anda Masukkan gagal disimpan, silahkan dicek secara manual inputan anda.', {
            life: 3000,
            theme: 'growl-error',
            header: 'Failed!'
        });
    }
    function addData(){
        $.jGrowl('Data yang Anda Masukkan gagal disimpan, karena data sudah ada.', {
            life: 3000,
            theme: 'growl-error',
            header: 'Failed!'
        });
    }
    function inpoServer(){
        $.jGrowl('Server error, connection timeout!', {
            life: 3000,
            theme: 'growl-warning',
            header: 'Timeout!'
        });
    }
});

看看function actDel()。它不能执行delSukses（），它只是想刷新页面函数，但在$(document).ready中的$('#formEdit').submit上，它可以执行addSukses（）和另一个函数。我在这个剧本中做错了什么？

Answer 1

在$(document).ready处理程序中定义的函数在其外部不可见。您需要通过从document.ready函数返回这些函数并将返回的值分配给变量来导出这些函数（如果您有多个函数，则需要以某种方式打包，例如在对象文字内）或者您需要将这些功能移到document.ready功能之外（这更容易）。

在document.ready内，您应该能够调用在其外部定义的函数。因此，即使在加载DOM之前不应调用函数，如果只从$(document).ready内部调用它们，那么你应该没问题。

例如：

function iAmAGlobalFunction() {
   // I can be executed from anywhere
}

var a;

var b = $(function() {
   // Functions defined inside here are not visible outside 

   function iAmLocalToDocReady() {
       // I can't be called from outside the doc ready
   }

   // but if I do this
   a = iAmLocalToDocReady;

   // or if I return it 
   return iAmLocalToDocReady;
}

// now I can call it with
a();
b();

通常，您不希望将所有函数放在全局命名空间中，因此大多数有经验的JavaScript开发人员会将所有函数和变量放在一个函数中，该函数用于隐藏它们并防止它们被意外覆盖其他代码。 jQuery通过定义jQuery对象（也将其别名为$）并让您通过它完成所有操作来完成此操作。

为什么函数不能在JavaScript中执行函数？

1 个答案: