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 に答える