1

我使用 jquery 找到了某人的投票系统，并希望将其合并到我的网站中。不幸的是，我希望它检测用户是否已经投票并基于此显示投票或否决按钮（和链接）。

它工作正常 - 除了我动态更改投票按钮时，即。如果我对某个项目投反对票，我会将图标更改为投赞成票，但是当我单击投赞成票图标时，不会触发超链接操作。我需要做些什么来“重新连接它”吗？注意：我刚刚在投票时实现了这个逻辑，投票我还没有改变，所以它目前清除了投票按钮。这将得到修复。

如果知道这一点很重要 - 这是在 .net/mvc 应用程序中。

 <script type="text/javascript">
        $(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("<img src='content/images/spinner.gif'/>");

                //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("<img src='content/images/spinner.gif'/>");

                //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 = "<a href='javascript:;' class='vote_up' id='vote_" + theId + "'></a>";
                        $("span#vote_buttons_" + theId).html(votelink);
                    }
                });

            });
        });

});
    </script>

html/mvc 视图中引用它的部分是：

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

                </td>
            </tr>
        }

所以我的逻辑工作正常 - 除了我动态地将投票按钮放入 html 占位符之外，它不再触发它需要的事件。

编辑-我确实尝试将功能移到文档就绪功能之外，但这也不能解决问题。

4

1 回答 1

2

这只会使用页面上的当前元素注册一个点击事件

$("a.vote_up").click(function() {

如果要确保覆盖动态元素，您应该做的是使用on.

$("body").on("click",'a.vote_up',function(){

它将将此事件委托给所有当前和未来的具有 vote_up 类的锚元素。

于 2013-01-11T04:29:43.170 回答