链接导致刷新

I try to make a link fire a javascript function wich fires a ajax call to delete an item.

Like so:

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

Clicking the cross caries the id of the product to be deleted. The only reason the href attribute is there is to carry the value.

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

Ajax call: as requested:

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);
            }
        });
    }
});

}

The success function is there to get an updated version of the cart. And this actually works just fine. However I get a wierd page refresh half way trough the cycle.

I click the link.

the page refreshes and the item is not deleted.

I click the link once more.

the page is not refreshed.

the item is deleted.

Why do I have to click two time and what can I do to resolve this?

Usually you get such behavior when page the is quite big and the document.ready event just hasn't fired yet when you click the link. The second time it may load faster (scripts/css already downloaded and coming from cache).

As per my knowledge, have a hidden field or a hidden span to save the "ProductId" and remove the href attribute altogether something like below.

<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; 
  }); 
}); 

EDIT: Approach-2:

You can store the ProductId in the anchor tag's "title" attribute something like below

jQuery:

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

This should solve your problem. Hope this helps!!

The most correct answer is: You don't know what the error is, because the page is refreshing before you see the error.

Return false prevents the page from refreshing after a click event, but if the code runs into an error before that point...

So you could try to remove the href tag and make it an rel (or something else) tag instead. read that and use it for your AJAX call. give the href a value like # or #removeItem. This will give you the error your craving for.

Hope this helps!

The correct answer is: When you add an element to your html after the page is loaded ( for example with AJAX ) and you want to have, in any way, fire an event. You have to rebind the click event to the new element.

When the page is loaded and your javascript and jQuery are loaded. The element isn't their yet so they can't find it or interact with it.

So in my situation:

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;
    });
}

The delete button did work after a refresh because in that way javascript got reloaded and the element was correctly bound.