Jquery confusion - why does my hyperlink stop working
<p>I found someone's voting system using jquery and wanted to incorporate it into my site.  Unfortunately I want it to detect if the user has already voted and display either the vote-up or vote-down button (and link) based on this.</p>

<p>It works fine - apart from when I dynamically change the vote button, ie. if I vote-down an item, I change the icon to be vote-up but when I click the vote-up icon the hyperlink action isn't being triggered.  Is there something I need to do to "wire it back up"?  Note: that I've just implemented this logic on vote-down, vote-up I haven't changed yet, so it currently clears out the voting buttons. This will be fixed.</p>

<p>In case this is important to know - this is in a .net/mvc application.</p>

<pre><code> &lt;script type="text/javascript"&gt;
        $(document).ready(function() {

            function onChange(newPageValue) {
                UpdateStories(newPageValue);
            }

            $(function() {
            $("a.vote_up").click(function() {
                //get the id
                var theId = $(this).attr('id').replace('vote_', '');

                // show the spinner
                $(this).parent().html("&lt;img src='content/images/spinner.gif'/&gt;");

                //fadeout the vote-count 
                $("span#votes_count_" + theId).fadeOut("fast");

                //the main ajax request
                $.ajax({
                    type: "POST",
                    data: { action: "vote_up", id: $(this).attr("id")}, 
                    url: "@Url.Action("ProcessVote", "Vote")",
                    success: function(msg) {
                        $("span#votes_count_" + theId).html(msg);
                        // fadein the vote count
                        $("span#votes_count_" + theId).fadeIn();
                        // remove the spinner
                        $("span#vote_buttons_" + theId).html('');
                    }
                });

            });
        });

        $(function() {
            $("a.vote_down").click(function() {
                //get the id
                var theId = $(this).attr('id').replace('vote_', '');

                // show the spinner
                $(this).parent().html("&lt;img src='content/images/spinner.gif'/&gt;");

                //fadeout the vote-count 
                $("span#votes_count_" + theId).fadeOut("fast");

                //the main ajax request
                $.ajax({
                    type: "POST",
                    data: { action: "vote_down", id: $(this).attr("id")}, 
                    url: "@Url.Action("ProcessVote", "Vote")",
                    success: function(msg) {
                        $("span#votes_count_" + theId).html(msg);
                        // fadein the vote count
                        $("span#votes_count_" + theId).fadeIn();
                        // remove the spinner
                        var votelink = "&lt;a href='javascript:;' class='vote_up' id='vote_" + theId + "'&gt;&lt;/a&gt;";
                        $("span#vote_buttons_" + theId).html(votelink);
                    }
                });

            });
        });

});
    &lt;/script&gt;
</code></pre>

<p>the part of the html/mvc view that references this is:</p>

<pre><code>@foreach (var story in Model.UserStories)
        {
            &lt;tr&gt;
                &lt;td&gt;@story["FormattedID"]
                &lt;/td&gt;
                &lt;td&gt;@story["Name"]
                &lt;/td&gt;
                &lt;td&gt;@Html.Raw(story["Description"])
                &lt;/td&gt;
                &lt;td&gt;@story["TaskEstimateTotal"]
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;span class='votes_count' id='votes_count_@story["FormattedID"]'&gt;@story["VoteCount"]&lt;/span&gt; votes
    &lt;br/&gt;
                    &lt;span class='vote_buttons' id='vote_buttons_@story["FormattedID"]'&gt;
                         @if (story["Voted"])
                         {
                             &lt;a href='javascript:;' class='vote_down' id='vote_@story["FormattedID"]'&gt;&lt;/a&gt;
                         }
                         else
                         {
                             &lt;a href='javascript:;' class='vote_up' id='vote_@story["FormattedID"]'&gt;&lt;/a&gt;
                         }
                    &lt;/span&gt;

                &lt;/td&gt;
            &lt;/tr&gt;
        }
</code></pre>

<p>So my logic works fine normally - apart from when I dynamically put the voting button into the html placeholder, then it no longer triggers the event that it needs to.</p>

<p>Edit - I did try moving the functions outside of the document ready function but that doesn't fix the issue either.</p>
