关于jQuery创建菜单，按钮不响应问题

问题遇到的现象和发生背景

正在为网页写一个分级按钮式菜单

用代码块功能插入代码，请勿粘贴截图

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>

运行结果及报错内容

点击测试按钮无反应

修改代码，让按钮直接被加载，点击有反应

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>

但这不是我想要的结果

我的解答思路和尝试过的方法

没有思路，也许和加载机制有关？

我想要达到的结果

一个在单页面呈现的分机菜单

你发的代码我试了一下没问题啊。点击修改页面也没问题。点击测试，也弹出了alert