如何删除按钮并将其替换为<a> tag through jquery

时间:2017-04-22 06:36:01

标签: jquery

This is my JQuery Code

<script>
$(".simpleCart_shelfItem button").click(function()
    {
        $(this).prop('disabled', true);
        $(this).addClass('disabled');
        $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>");

        var action = "add";
        var queryString = "action="+action+"&pid="+this.value;
        var $this = $(this);

        $.ajax({
                url: "add_cart",
                data: queryString,
                type: "POST",
                success:function(data)
                    {
                        $this.remove();
                        $($this).before("<a href='cart' class='btn view-more'>In Your Cart (View)</a>");
                    },
                error:function(){}
            });
    });
</script>

This is my HTML Code:

<div class="simpleCart_shelfItem">
    <p><span>&#8377; price</span> <i class="item_price">&#8377; selling price</i></p>
    <button value="some value" class="btn view-more">Add To Cart</button>
    <a href="product?id=id>
        <button class="hashs-cart">Buy Now</button>
    </a>
</div>

What i want to achieve is as soon as the user click on add to cart the button should be removed and replaced with this => <a href="cart" class="btn view-more">In Your Cart (View)</a>

By using the above JQuery code i am able to remove the button but not able to replace it with the <a> tag.

Can anyone help with this that why is it happening so?

1 个答案:

答案 0 :(得分:0)

 $($this).before 

应为$this.replacewith

 <script>
$(".simpleCart_shelfItem button").click(function()
{
    $(this).prop('disabled', true);
    $(this).addClass('disabled');
    $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>");

    var action = "add";
    var queryString = "action="+action+"&pid="+this.value;
    var $this = $(this);

    $.ajax({
            url: "add_cart",
            data: queryString,
            type: "POST",
            success:function(data)
                {
                   /*$this.remove();*/   //remove this line
                    $this.replacewith("<a href='cart' class='btn view-more'>In Your Cart (View)</a>");
                },
            error:function(){}
        });
});