Question

我找到了某人使用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占位符时，它不再触发它需要的事件。

编辑 - 我确实尝试在文档就绪函数之外移动函数，但这也无法解决问题。

Answer 1

这只会记录页面上当前元素的点击事件

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

如果你想确保涵盖动态元素，你应该做的是使用on。

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

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

Jquery混淆 - 为什么我的超链接停止工作

1 个答案: