エレメントIDをリアルタイムで変更する

Question

私はオンラインショップを作成中です。私はid #sendProductのボタン "Add product"を持っています。このボタンをクリックすると、idを#deleteProductに変更する必要があります。これは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'); 
 
      } 
 
     }) 
 

 
    }) 
 
});

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

私は各要素のためのユニークなことになっているすべての後に、それは、要素の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 
     } 
    }) 
}) 

Answer 3

簡単で安全な方法は、お互いの隣に二つのボタンを使用することです。 1つは表示され、もう1つは表示されません。それらはユーザーと同じボタンとして表示されます。あなたはhide（）とshow（）の代わりにtoggle（）を使うことができますが、読みやすさに害を及ぼし、デバッグするのは難しいです。

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