Favorite and unfavorite button in Jquery is not working
<p>I need to develop a button that helps users favorite or un-favorite an article. When the user clicks on the button, the color of the button or the background needs to change to Orange, and when he un-favorites the article, the color on the button should go away. </p>

<p>Here's my current implementation in Jquery, but it only works once. The binding is not handled the second time.</p>

<p>I suppose I have to handle the binding again when the elements are created for the second time, but I am not exactly sure where to handle it.</p>

<pre><code>    $('.colorStar').bind('click', function() {

            var id = $(this).parent().parent().parent().parent().attr('id');
            var removeElement = $(this).parent();
             $(removeElement).empty();
             $("&lt;button data-action='show-contribute-how-to' class='btn colorStarred show'&gt;&lt;i class='icon-star'&gt;&lt;/i&gt;&lt;/button&gt;")
             .click(function (){
                var id = $(this).parent().parent().parent().parent().attr('id');
                var removeElement = $(this).parent();
                $(removeElement).empty();
                $(removeElement).append("&lt;button data-action='show-contribute-how-to' class='btn colorStar show'&gt;&lt;i class='icon-star'&gt;&lt;/i&gt;&lt;/button&gt;");  
             }).appendTo(removeElement);

            $.ajax({
                type : "POST",
                url : "starNote",
                data : {
                    id : id
                }
            });
        });
</code></pre>

<p>HTML</p>

<pre><code>&lt;a class="star"&gt;&lt;button class="btn colorStar hide" data-action="show-contribute-how-to"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
</code></pre>

<p><strong><a href="http://jsfiddle.net/SLq8W/" rel="nofollow">http://jsfiddle.net/SLq8W/</a></strong></p>
