實時更改元素ID

我正在網上購物。我有一個按鈕「添加產品」ID爲#sendProduct。點擊此按鈕後，必須將ID更改爲#deleteProduct。它改變了ID，但舊的處理程序在ID更改後仍然處於活動狀態。我的意思是當我再次點擊按鈕時，它就像id一樣沒有改變。看看我的代碼。根據我在評論建議實時更改元素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'); 
 
      } 
 
     }) 
 

 
    }) 
 
});

來源

2016-07-17 Ігор Онек

更改節點的ID不會刪除其現有的處理程序。你究竟在做什麼？ – smarx

瀏覽你的代碼，我認爲一個更好的解決方案只是有兩個按鈕，一次只能看到其中一個按鈕。點擊時只需切換其可見性。 – smarx

或者，如果需要，他可以在成功承諾上創建一個新的事件處理程序。 –

代碼。

$(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>

來源

2016-07-17 00:16:51 smarx

我不相信這是一個好主意，改變元素的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 
     } 
    }) 
})

來源

2016-07-17 00:29:14

一個簡單而安全的方法是使用彼此相鄰的兩個按鈕。一個顯示，另一個隱藏。它們將作爲相同的按鈕顯示給用戶。您可以使用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>

來源

2016-07-17 02:51:25

實時更改元素ID

回答

相關問題