jquery 来自外部文件未加载

Question

所以我知道这个问题已经被问过很多次了，但我似乎无法解决这个问题，即使它对我来说看起来是正确的。来自外部文件的 jquery 函数无法正确加载。

我的 tableMethods.js 外部文件看起来像

$(function(){

// Write FITS
function writeFits(){
    var data = $('.sastable').bootstrapTable('getData');
    var name = $('#fitsname').val();
    $.getJSON($SCRIPT_ROOT + '/writeFits', {'data':JSON.stringify(data),'name':name}, 
        function(data){
            $('#fitsout').text(data.result);
        }); 
}

// Delete rows from data table
function deleteRows(){
    var $table = $('.sastable');
    var $delete = $('#delete'); 

    var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
    });

    $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
    });
}

})

我的htmlheader长得像

<script type="text/javascript" src="/static/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table.js"></script>
<script type='text/javascript' src="/static/js/tableMethods.js"></script>

当我检查检查器时，当我单击看起来像

的按钮时，它说文件已经加载

<button id="delete" class="btn btn-danger" type='button' onClick='deleteRows()'>Delete Rows</button>

我收到错误

Uncaught ReferenceError: deleteRows is not defined

Answer 1

这是一个范围界定问题。您必须将函数移到 $(function() { ... })

之外

在 JavaScript 中，在函数中专门定义的任何内容通常都保留在函数中：

var x = 3;

(function() {
    var y = 1;
})();

console.log(x); // 3
console.log(y); // error

因此，如果您在一个函数中定义一个函数，您只能从您定义它的那个函数中调用它。当试图从其他任何地方调用它时，内部函数似乎是未定义的。

对于你的情况，你可以简单地删除包装函数：

$(function() { // Delete this...

    ...

}); // And this

有关详细信息，请阅读 You Don’t Know JS: Scope & Closures

jquery 来自外部文件未加载

jquery from external file not loading

javascript

jquery

external