Why did not work jQuery button in this code : <p><a href="https://i.imgur.com/WtzTa3g.png" rel="nofollow noreferrer">https://i.imgur.com/WtzTa3g.png</a>   </p>

<p>what is my mistake ? why this click function is did not work ? i made this function without each loop, then that function working properly, but why did not work this place ?  </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt; NG - REPEAT &lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table border="1"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;ID&lt;/th&gt;
                &lt;th&gt;NAME&lt;/th&gt;
                &lt;th&gt;VERSION&lt;/th&gt;
                &lt;th&gt;PRICE&lt;/th&gt;
                &lt;th&gt;ACTION&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody class="tr"&gt;

        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;script&gt;

        $(document).ready(function()
        {
            $.ajax({
                url:'data.json',
                dataType:'json',
                success: function(data)
                {
                        console.log(data);
                    $.each(data.product, function(name, value)
                    {
                        var result = '&lt;tr&gt;&lt;td&gt;'+name+'&lt;/td&gt;&lt;td&gt;'+value.name+'&lt;/td&gt; &lt;td&gt;'+value.version+'&lt;/td&gt; &lt;td&gt;'+value.price+'&lt;/td&gt;&lt;td&gt;&lt;button id="btn"&gt;Load&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';
                        $(".tr").append(result);
                    });
                }
            });

            $("button").click(function(){
                alert("hi");
            });
        });
    &lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p></p>
