met*_*rsk 2 javascript python jquery flask
我有包含我的 CSS 和 JS 的 HTML 文件。在创建我的 Flask 应用程序时，我决定将 CSS 和 JS 分开，以将文件分开放在一个静态目录中。
当我在一个 HTML 文件中包含所有内容时，一切都按预期工作，但是当 CSS 和 JS 位于单独的文件中时，部分 JS 不会执行。
这是我在 HTML 文件中的导入：
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
这是独立 JS 文件的内容：
$('#user_button').click(function(event) {
$("#user_id").html($('option:selected').html());
$('.button_div').show();
});
var prodData = [];
var boughtProds = [];
$('.prod_button').click(function(event) {
if (boughtProds.indexOf($(this).data('name')) == -1) {
prodData.push({
name: $(this).data('name'),
price: $(this).data('price'),
quantity: 1,
});
boughtProds.push($(this).data('name'));
} else {
prodData[boughtProds.indexOf($(this).data('name'))].quantity = prodData[boughtProds.indexOf($(this).data('name'))].quantity + 1;
}
var total = 0;
for (var x in prodData) total += prodData[x].price * prodData[x].quantity
total = Math.round(total * 100) / 100
var subtotal = '<tr><td></td><td>Subtotal</td><td>$' + total + '</td></tr>';
var allProds = '';
$.each(prodData, function(k, v) {
allProds = allProds + '<tr><td>' + v.name + '</td><td>' + v.quantity + 'x</td><td>@ $' + v.price + ' each</td></tr>\n';
});
$('.table_contents > tbody').html(allProds);
$('.table_contents > tfoot').html(subtotal);
});
$(document).ready(
function() {
$('.button_div').hide();
})
奇怪的是，此功能在文档加载时正常工作：
$(document).ready(
function() {
$('.button_div').hide();
})
并且此功能不起作用：
$('#user_button').click(function(event) {
$("#user_id").html($('option:selected').html());
$('.button_div').show();
});
但更奇怪的是，当所有内容都在一个 HTML 文件中时，一切都可以正常工作。
有什么想法吗？
你要么需要移动<script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script>以外的的<head>标签（例如，在2002年底<body>），或者你需要把$('#user_button').click(...);里面$(document).ready(...);。
发生的事情是您的浏览器在处理您的<head>标签时开始加载您的外部脚本文件。文件一加载，浏览器就会执行它，将 click 事件绑定到#user_button. 这发生在它处理您的<body>标签之前，因此#user_button还不是 DOM 的一部分。
如果您尝试检查，$('#user_button')您会发现它是空的。
console.log($('#user_button'));
这输出
[]
| 归档时间： |
|
| 查看次数： |
10968 次 |
| 最近记录： |