无法将 jquery 应用于附加元素

Not able to apply jquery to appended elements

我正在动态添加 #show_data 按钮，但无法在该按钮上使用 jQuery。 Hi! data 从未被记录如何将脚本添加到动态元素？

<body>

    <button id="show_fields">Show Fields</button>
    <div id="button"></div>

    <script>

        $("#show_fields").click(function(){
            console.log('Hi! fields');
            $("#button").html("<button id=\"show_data\">Show data</button>");
        });

        $("#show_data").click(function(){
            console.log('Hi! data');
        });

    </script>

</body>

使用 event delegation 将事件附加到动态添加的元素：

$("#button").on('click','#show_data',function(){
   console.log('Hi! data');
});