javascript函数在放入不同文件时不起作用

Question

我对这一切都很陌生，并且正在制作一个严重依赖动态加载的 html 页面的 web 应用程序到主页上的 div 中。

主页链接到各种js文件，包括jquery和我自己的一些。

除此之外，每个加载的 html 文件都链接到自己的 js 文件以控制用户交互。其中一些还有一个 div，html 页面被加载到其中。

我注意到的一件事是一些 html 页面对加载到主页中的脚本的反应较慢。全局性的东西，比如点击按钮时突出显示需要调整，以便在某些页面上甚至可以感知它们。

另外一件让我很恼火的事情是，有些脚本在单独的文件中时不起作用，无论它们是链接到主页还是不同的子页面。我需要把实际的函数放到实际子页面的js文件中。

这个用于从数据库中填充 html 表的简单函数就是其中之一......

function fill_grid(collection, columns){

    var jsonObj = JSON.stringify(columns);

    param = "collection=" + collection + "&columns=" + jsonObj;

        // Ajax call ~~~~~>

    $.ajax({
        type:           'POST',
        url:            'back/fill_grid.php',
        processData:    false,
        data:           param,
        dataType:       'json',
        success:        function(data){

                            $('.grid_foot').text(data.rows.length + ' records');

                            $.each(data.rows, function(count, item) {

                                var c = 0;
                                var cells = '';

                                while (c < columns.length) {

                                    cells += '<td class="'+ columns[c] +'">' + item['cell'][c] + '</td>';

                                    c++;
                                }

                                var newTr = '<tr id="' + item['id'] + '">'+ cells +'</tr>';
                                $('.grid_wrapper table').append(newTr);
                            });

                            var c = 0;

                            while (c < columns.length) {

                                var min_width = $('div.' + columns[c]).css('min-width');
                                $('td.' + columns[c]).width(min_width);

                                var col_width = $('td.' + columns[c]).width(); 
                                $('div.' + columns[c]).width(col_width);

                                c++;
                            }

                            var c = columns.length - 1;

                            var col_width = $('div.' + columns[c]).width(); 
                            $('td.' + columns[c]).width(col_width);
                        }       
    });
}

...尽管您可以看到它是为模块化应用程序设计的。 ajax 调用的参数和表的构造都传递给它。但是当它在单独的文件中时它不会运行，尽管 firebug 和 dom 检查器都没有显示错误，当然当它粘贴到两者的控制台时它会起作用。

为什么会这样？是因为嵌套的html页面吗？您可以加载到页面中的脚本数量是否有限制？其他脚本会干扰它吗？如何调试？

编辑：Firebug 和 Dom Inspector 现在都告诉我 'data_grid()' 没有定义，并且它无法找到 datagrid.js 事件，尽管我在脚本标签中使用了正确的路径，甚至在之前包含它主页面自带js文件！我什至刷新了我的浏览器缓存并重新启动它，但它仍然这样说。

编辑：经过一番窥探后，我在其中一个子页面上发现了一个 bum 链接，修复它后，我不再收到 404 file not found 错误。但是我仍然得到一个函数未定义的错误。

Answer 1

我刚刚删除了 jquery "$(document).ready(function() { });"从文件中，它工作得很好！现在我想知道这是否会导致它有时只能工作。