我对这一切都很陌生,并且正在制作一个严重依赖动态加载的 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 错误。但我仍然得到一个函数未定义的错误。