1

アイテムを削除するためにajax呼び出しを起動するjavascript関数をリンクに起動させようとしています。

そのようです：

<a class="delete" href="@item.Product.Id">(x)</a>

十字をクリックすると、削除する製品のIDが表示されます。href属性がある唯一の理由は、値を運ぶためです。

$(document).ready(function () {  
$('.delete').click(function (e) {
    e.preventDefault();
    var id = $(this).attr("href");
    deleteItem(id);
    return false;
});
});

Ajax呼び出し：要求に応じて：

function deleteItem(id) {
$.ajax({
    url: "/Shoppingcart/RemoveItem",
    type: "POST",
    data: "id=" + id,
    cache: false,
    error: function (xhr, status, error) {
        console.log(xhr, status, error);
    },
    success: function () {
        $.ajax({
            url: "/Shoppingcart/Index",
            type: "GET",
            cache: false,
            error: function (xhr, status, error) {
                console.log(xhr, status, error);
            },
            success: function (result) {
                success(result);
            }
        });
    }
});

}

成功関数は、カートの更新バージョンを取得するためにあります。そして、これは実際にはうまく機能します。ただし、サイクルの途中で奇妙なページの更新が行われます。

リンクをクリックします。

ページが更新され、アイテムは削除されません。

リンクをもう一度クリックします。

ページは更新されません。

アイテムが削除されます。

なぜ2回クリックする必要があるのですか？これを解決するにはどうすればよいですか？

4

4 に答える 4

2

通常、ページが非常に大きくdocument.ready、リンクをクリックしてもイベントがまだ発生していない場合に、このような動作が発生します。2回目はロードが速くなる可能性があります（スクリプト/ cssはすでにダウンロードされており、キャッシュから取得されています）。

于 2012-10-23T16:29:59.950 に答える
2

最も正しい答えは次のとおりです。エラーが表示される前にページが更新されるため、エラーが何であるかがわかりません。

falseを返すと、クリックイベント後にページが更新されなくなりますが、その時点より前にコードでエラーが発生した場合は...

したがって、hrefタグを削除して、代わりにrel（または他の何か）タグにすることができます。それを読んで、AJAX呼び出しに使用してください。またはhrefのような値を指定します。これはあなたにあなたの渇望のエラーを与えるでしょう。##removeItem

お役に立てれば！

于 2012-10-24T09:50:27.457 に答える
0

私の知る限り、「ProductId」を保存し、href属性を完全に削除するには、非表示のフィールドまたは非表示のスパンを用意してください。

<span id="productIdSpan">@item.Product.Id</span>
<a class="delete"></a>

jQuery：

$(document).ready(function () {   
     $('.delete').click(function (e) {     
     var id = $("#productIdSpan").html();     
     deleteItem(id);     
     return false; 
  }); 
});

編集：アプローチ-2：

ProductIdは、次のようにアンカータグの「title」属性に保存できます。

jQuery：

$(document).ready(function () {   
     $(".delete").on("click", function (e) {     
     deleteItem($(this).attr("title"));     
     return false; 
  }); 
});

これで問題が解決するはずです。お役に立てれば！！

于 2012-10-23T16:31:10.590 に答える
0

正解は次のとおりです。ページが読み込まれた後に（たとえばAJAXを使用して）HTMLに要素を追加し、何らかの方法でイベントを発生させたい場合。クリックイベントを新しい要素に再バインドする必要があります。

ページが読み込まれ、javascriptとjQueryが読み込まれるとき。要素はまだ彼らのものではないので、彼らはそれを見つけたり、それと相互作用したりすることができません。

だから私の状況では：

function addItem(id, amount) {
    $.ajax({
        url: "/Shoppingcart/AddItem",
        type: "POST",
        data: "id=" + id + "&amount=" + amount,
        cache: false,
        error: function (xhr, status, error) {
            console.log(xhr, status, error);
        },
        success: function () {
            // Calls for the new update version of the shopping cart.
            $.ajax({
                url: "/Shoppingcart/Index",
                type: "GET",
                cache: false,
                error: function (xhr, status, error) {
                    console.log(xhr, status, error);
                },
                success: function (result) {
//Call the function that changes the html
                        success(result);
                    }
                });
            }
        });
    }

function success(result) {
    $("#shoppingcart").html(result);
//The tricky part: rebinding the new event.
    $('.delete').click(function (e) {
        e.preventDefault();
        var id = $(this).attr("data-id");
        deleteItem(id);
        return false;
    });
}

更新後に削除ボタンが機能したのは、そのようにしてjavascriptが再ロードされ、要素が正しくバインドされたためです。

于 2012-10-25T14:11:35.350 に答える