Adding click event to button is working but adding click to same element doesn't work
<p>I added click event to button . it is working fine.</p>

<pre><code> $("#button1").click(function(){var elem = $("&lt;p&gt;&lt;/p&gt;").text("hello").attr("id","created");
                     $("body").append(elem);});
$("#button2").click(function(){ $("#created").hide();});
</code></pre>

<p><a href="https://jsfiddle.net/e89uf3wg/5/" rel="nofollow">https://jsfiddle.net/e89uf3wg/5/</a></p>

<p>But adding click event to new created element not working. </p>

<pre><code> $("#button1").click(function(){var elem = $("&lt;p&gt;&lt;/p&gt;").text("hello").attr("id","created");
                     $("body").append(elem);});
$("#created").click(function(){ $("#created").hide();});
</code></pre>

<p><a href="https://jsfiddle.net/e89uf3wg/19/" rel="nofollow">https://jsfiddle.net/e89uf3wg/19/</a></p>

<p>Can someone explain.  i am expecting. I create only one element and when  i click on that element it should hide.  thats it. This question is not about id and class . just create one element and try to experiment what i am saying. I want when i click on created paragraph it should hide itself.</p>