Question

我正在网上开店。我有一个按钮＆＃34;添加产品＆＃34; id为#sendProduct。单击此按钮后，必须将id更改为#deleteProduct。它会更改ID，但旧的处理程序在ID更改后仍处于活动状态。我的意思是当我再次点击按钮时，它的反应就像id没有改变。看看我的代码。

＆＃13;

$(document).ready(function () {
    $('#sendProduct').on('click', function () {
        var id = $(this).attr('data-id');
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            url: '/cart/add-to-cart',
            method: 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(id),
            beforeSend: function (xhr) {
                xhr.setRequestHeader(header, token);
            },
            dataType: 'json',
            success: function (id) {
                $('#sendProduct').text('Delete from cart');
                $('#sendProduct').attr('data-id', id);
                $('#sendProduct').attr('id', 'deleteProduct');
                console.log($('#deleteProduct').attr('id'));
            }
        });
    });
    
    $('#deleteProduct').on('click', function () {
        var id = $(this).attr('data-id');
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            url: '/cart/delete-product',
            method: 'GET',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(id),
            beforeSend: function (xhr) {
                xhr.setRequestHeader(header, token);
            },
            dataType: 'json',
            success: function (id) {
                $('#deleteButton').text('Add product');
                $('#deleteButton').attr('data-id', id);
                $('#deleteButton').attr('id', 'sendProduct');
            }
        })

    })
});

＆＃13;

Answer 1

根据我的评论中的建议编码。

$(function () {
  $('#send').click(function () {
    console.log('You clicked send.');
    $('#send, #delete').toggleClass('hidden');
  });
  $('#delete').click(function () {
    console.log('You clicked delete.');
    $('#send, #delete').toggleClass('hidden');
  });
});

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="send">Send</button>
<button id="delete" class="hidden">Delete</button>

Answer 2

一种简单安全的方法是使用彼此相邻的两个按钮。一个显示，另一个隐藏。它们将显示为用户的相同按钮。您可以使用toggle（）而不是hide（）和show（），但它会损害可读性，并且更难调试。

<p>
    <button id='button-one'>Submit</button>
    <button id='button-two' style='display: none;'>Submit</button>
</p>

<script>
  $('#button-one').click(function(){
     $('#button-one').hide();
     $('#button-two').show();
     // do important stuff
  });

   $('#button-two').click(function(){
     // do more important stuff and maybe toggle the visibility
     // of the buttons again
  });
</script>

Answer 3

我认为更改元素的id属性并不是一个好主意，毕竟它应该对每个元素都是唯一的。

您是否尝试在单击按钮并将事件处理程序分别绑定到该类后，为该按钮添加类名？将您的按钮ID设置为#yourButton，然后尝试使用sendProduct和deleteProduct类。像这样：

//your button may have sendProduct class a default class
$('.sendProduct').on('click', function () {
    //yout code
    $.ajax({
        //your ajax settings
        success: function (id) {
            $('#yourButton').text('Delete from cart');
            $('#yourButton')
                .toggleClass('sendProduct') //remove this class
                .toggleClass('deleteProduct'); //add this class
        }
    });
});

$('.deleteProduct').on('click', function () {
    //your code
    $.ajax({
        //your ajax settings
        success: function (id) {
            $('#youtButton').text('Add product');
            $('#youtButton')
                .toggleClass('deleteProduct') //remove this class
                .toggleClass('sendProduct'); // add this class
        }
    })
})

实时更改元素ID

3 个答案: