问题遇到的现象和发生背景
正在为网页写一个分级按钮式菜单
用代码块功能插入代码，请勿粘贴截图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>body{text-align: center;}</style>
<script>
$(function(){
$("#b").click(function(){
$("#a").html($("#c").html());
});
$("#d").click(function(){
alert("Hellow world!")
});
});
</script>
</head>
<body>
<h1>演示</h1>
<div id="a">
<button id="b">按下修改页面</button>
</div>
<template id="c">
<button id="d">测试</button>
</template>
</body>
</html>
运行结果及报错内容
点击测试按钮无反应
修改代码，让按钮直接被加载，点击有反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>body{text-align: center;}</style>
<script>
$(function(){
$("#b").click(function(){
$("#a").html($("#c").html());
});
$("#d").click(function(){
alert("Hellow world!")
});
});
</script>
</head>
<body>
<h1>演示</h1>
<div id="a">
<button id="b">按下修改页面</button>
</div>
<p id="c">
<button id="d">测试</button>
</p>
</body>
</html>
但这不是我想要的结果
我的解答思路和尝试过的方法
没有思路，也许和加载机制有关？
我想要达到的结果
一个在单页面呈现的分机菜单
