放入不同文件时,javascript函数无法正常工作

时间:2010-10-21 13:02:52

标签: javascript jquery nested modular

我对这一切都很陌生,并且正在创建一个Web应用程序,它在很大程度上依赖于动态加载的html页面到主页面上的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文件未找到错误。但我仍然得到一个未定义错误的函数。

1 个答案:

答案 0 :(得分:0)

我刚删除了jquery“$(document).ready(function(){});”从文件中它完美地工作!现在我想知道这是否会导致它有时只能起作用。