javascript - 实时更改元素id

Question

我正在开网店。我有一个带有 id #sendProduct 的“添加产品”按钮。单击此按钮后必须将 id 更改为#deleteProduct。它更改了 id，但旧的处理程序在 ID 更改后仍然处于事件状态。我的意思是当我再次点击按钮时，它的 react 就像 id 没有改变一样。 看看我的代码。

$(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');
            }
        })

    })
});

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>