JavaScript generated elements not functioning - jQuery
<p>I have a table as below;</p>

<pre><code>&lt;table id="mytable"&gt;
    &lt;tr&gt;
        &lt;td&gt;cola1&lt;/td&gt;
        &lt;td&gt;cola2&lt;/td&gt;
        &lt;td&gt;cola3&lt;/td&gt;
        &lt;td class="rem"&gt;cola4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;colb1&lt;/td&gt;
        &lt;td&gt;colb2&lt;/td&gt;
        &lt;td&gt;colb3&lt;/td&gt;
        &lt;td class="rem"&gt;colb4&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;

&lt;button id="but"&gt;Add Row&lt;/button&gt;
</code></pre>

<p>A button <code>&lt;button id="but"&gt;mybutton&lt;/button&gt;</code> is placed at bottom of table, which on click, adds a new row to the table. The last column of rows have class <code>rem</code>, which has a function to remove the parent row on click.</p>

<p>Here is the javascript</p>

<pre><code>$(document).ready(function() {
    $('#but').click(function() {
        row = $("&lt;tr&gt;&lt;/tr&gt;");
        col1 = $('&lt;td&gt;colex1&lt;/td&gt;');
        col2 = $('&lt;td&gt;colex2&lt;/td&gt;');
        col3 = $('&lt;td&gt;colex3&lt;/td&gt;');
        col4 = $('&lt;td class="rem"&gt;colex4&lt;/td&gt;');
        row.append(col1,col2,col3,col4).prependTo("#mytable");
    });

    $('.rem').click(function() {
        var $button = $(this);
        var $row = $button.closest('tr');
        $row.fadeOut('slow');
    });
});
</code></pre>

<p>The function work well in above two rows. But remove button is not working in rows added by jQuery. How can I make the Javascript added rows work like others?</p>

<p><strong><a href="http://jsfiddle.net/blasteralfred/Nug2b/1/" rel="nofollow">Here</a></strong> is the fiddle.</p>
