我正在使用 d3，并尝试编写一个非常简单的页面来显示我的 d3 示例以供将来引用。
本质上，我的页面显示了 d3 代码的结果(在本例中由 Mike Bostock 强制布局)，然后是其下方。将相关的javascript嵌入到页面中以供引用。
我有一个简单的 jQuery '.load' 脚本来引入 javascript 函数，效果很好。而且，我使用highlight.js 对已引入的代码进行语法格式化。这也有效。
目前我有两个按钮，一个用于加载脚本文本，一个用于进行格式化。这很好用。
但是，我希望在页面加载时一切正常。
我尝试将两个脚本合并在一个按钮中作为测试(如下所示)，但语法突出显示不起作用。但语法按钮本身就可以正常工作。
这几乎就像 .load 事件的 DOM 操作没有完成或者什么？
任何帮助将不胜感激。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta source="http://codepen.io/planetoftheweb/pen/CdqcD">
<link rel="stylesheet" href="../styles/style.css">
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Syntax highlighter references -->
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/googlecode.min.css">
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<!-- d3 script for this example -->
<script type="text/javascript" src="JS/new_chart.js"></script>
<title>Document</title>
<style>
body, .stage {
background: white;
}
</style>
<script src="../d3.v3.js" charset="utf-8"></script>
<script>
function code() {
show_code();
format_text();
}
function show_code() {
$('.code pre code').load('JS/new_chart.js');
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
};
function format_text() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
};
</script>
</head>
<body onload = "new_chart()">
<div class = "page_title">
<h1>D3 example</h1>
<h2>Force layout</h2>
</div>
<div class = "chart" id ='chart'></div>
<div class = "code">
<button id="show_code" onclick="code();">show code</button>
<button onclick="format_text();">format</button>
<pre><code>
</code></pre>
</div>
</body>
</html>
最佳答案
您遇到的问题是因为加载是异步发生的，因此对语法荧光笔的第一次调用发生在代码加载之前。试试这个:
<div class="code">
<button id="show_code">show code</button>
<pre><code></code></pre>
</div>
$('#show_code').click(function() {
var $codeContainer = $('pre code', $(this).closest('.code'));
$codeContainer.load('JS/new_chart.js', function() {
hljs.highlightBlock($codeContainer[0]);
});
});
请注意，荧光笔调用被放置在 load 的“回调”函数参数中。这意味着它将在 load 请求完成后执行。我还使加载程序在与单击的按钮相关的特定 .code block 上工作 - 以防万一您需要每页超过 1 个。
关于javascript - 带有 javascript onclick 的多个 DOM 操作函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18143811/