0

私は MVC 3 アプリケーションを開発しており、かみそりの構文を使用しています。

このアプリケーションでは、コメント機能を提供しています。

コメントを追加する機能を提供し、DB に保存しました。

ユーザーが削除ボタンをクリックすると、メッセージが「クリックされました」と表示されます。

ユーザーがエンティティを読み込むと、以前に追加されたコメントが削除ボタンのあるページに表示され、ユーザーがそのボタンをクリックすると、「クリックされた」というメッセージが表示されます。

ここに画像の説明を入力

現在、ユーザーが新しいコメントを追加すると、DB に正常に保存され、[削除] ボタンとともにページにも表示されます。

ユーザーが削除ボタンをクリックすると、メッセージが表示されなくなります...（DBから新しいコメントをロードするときにDivタグを追加します）

追加に関して問題があると思います。つまり、以前のコメントの削除ボタンはうまく機能しますが、追加を使用してボタンを追加すると機能しません...

これがコードで、コメントをDBに保存し、成功すると、ページにデータを表示するボタン付きのHTMLコードを作成します。

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () 

        {
     if (document.getElementById('Comment').value != "")

         $.ajax({

                type: 'post',
                url: '/Comment/SaveComments',
                dataType: 'json',
                data:
                { 

                 'comments' : $('#Comment').val(), 
                 'EType' : @Html.Raw(Json.Encode(ViewBag.EType)), 
                  'EId' : @Html.Raw(Json.Encode(ViewBag.EId))

                },
                success: function (data) {

                      $("p.p12").append('<button type="button" id = "1" class="deleteComment">Delete</button><br />')

                   alert(data.Id);

                }

            });
        });
    });
</script>

ユーザーが [削除] ボタンをクリックすると、このコードが作成されました。

$(document).ready(function () {
        $(".deleteComment").click(function ()
         {
            alert("Clicked");


        });
    });

以前のコメントでは、ユーザーが削除ボタンをクリックすると「クリックされました」というメッセージが表示されますが、ユーザーが新しく追加されたコメントの削除ボタンをクリックすると、メッセージは表示されません...

4

1 に答える 1

3

この削除ボタンは動的に DOM に追加されるため、clickこの削除ボタンのイベントを定期的に購読する必要があります。この段階では削除ボタンがまだ存在しないため、そのまま使用することはできません。したがって、使用している jQuery のバージョンに応じて、次の 3 つの方法があります。.click()document.ready

.on()、.delegate()または.live()。

推奨されるアプローチは.on()、jQuery 1.7 以降でサポートされているものです。

$(document).on('click', '.deleteComment', function() {
    alert("Clicked");
});

これを でラップする必要はもうありませんdocument.ready。

古いバージョンを使用している場合は、.delegate()(jQuery 1.4.2 で導入) と同じです:

$(document).delegate('.deleteComment', 'click', function() { 
    alert('Clicked'); 
});

さらに古いバージョンの jQuery を使用している場合は、アップグレードする必要があります。アップグレードしたくない場合は、次のようにします.live()。

$('.deleteComment').live('click', function() { 
    alert('Clicked'); 
});

そして、私があなたのコードにいる間、ここにいくつかの他の発言があります.

交換：

<script src="../../Scripts/jquery.js" type="text/javascript"></script>

と：

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>

また、以下を置き換えます。

url: '/Comment/SaveComments',

と：

url: '@Url.Action("SaveComments", "Comment")',

ところで、URL を JavaScript に入れる代わりに、の値を直接使用することもできますAddCommentButton。マークアップを表示していませんが、次のようになると思います。

@Html.ActionLink("Add a comment", "SaveComments", "Comment", null, new { id = "AddCommentButton" })

あとは目立たないように AJAX 化するだけです。

$(document).ready(function () {
    $('#AddCommentButton').click(function (evt) {
        evt.preventDefault();

        var comment = $('#Comment').val();
        if (comment == '') {
            alert('Please enter a comment');
            return;
        }

        $.ajax({
            type: 'post',
            url: this.href,
            data: { 
                comments : comments, 
                EType: @Html.Raw(Json.Encode(ViewBag.EType)), 
                EId: @Html.Raw(Json.Encode(ViewBag.EId))
            },
            success: function (data) {
                // You probably need to embed the comment id as a HTML data-* attribute
                // to the button instead of using a hardcoded id="1" value
                // which by the way is an invalid value of an id in HTML:
                $('p.p12').append(
                    $('<button/>', {
                        'class': 'deleteComment',
                        'html': 'Delete',
                        'data-id': data.Id
                    }).after($('<br/>'))
                );
            }
        });
    });
});

これで、削除ボタンのクリック コールバック内で、削除するコメントの ID にアクセスできるようになります。

$(document).on('click', '.deleteComment', function() {
    var commentId = $(this).data('id');
    // TODO: delete the comment
});

ASP.NET MVC アプリケーションでは絶対に URL をハードコーディングしないでください。それらを生成するには、常に URL ヘルパーを使用してください。これは、URL ヘルパーがルーティングの設定と、アプリケーションが実行されている可能性のある仮想ディレクトリを考慮に入れるためです。したがって、後でルートのパターンを変更したり、IIS にアプリケーションをデプロイすることにした場合でも、アプリケーションが機能するために、すべてのページを調べて、誤ってハードコードされた URL を置き換える必要はなくなります。

于 2012-09-24T08:42:24.410 に答える