Блог

это моя ситуация:

 lt;button id="btnSendInvoice"gt;Button Alt;/buttongt;  // Btn Send Invoice $('#btnSendInvoice').click(function() {  console.log(BUTTON A)   $("#btnSendInvoice").text("Button B")  $("#btnSendInvoice").attr("id","btnSetPayment")  });  // Btn Set Payment $('#btnSetPayment').click(function() {  console.log(BUTTON B) });  

Оптический он работает. Если я нажал кнопку A, я попадаю в консоль «Кнопка A», и текст кнопки меняется на кнопку B, а также идентификатор btnSetPayment.

Если я сейчас нажму кнопку «Создать» B, я снова получу кнопку A в консоли. В чем моя ошибка?

1. Причина, по которой ваш код не сработал, заключается в том, что во время выполнения $('#btnSendInvoice').click(function() { строки кода он найдет элемент с id as btnSendInvoice и назначит событие и его function этому элементу. В начале у вас есть with идентификатор кнопки btnSendInvoice, поэтому он назначит ей эту функцию.
2. В следующей строке он выполняется $('#btnSetPayment').click(function() { , поэтому он найдет элемент с id as btnSetPayment , но в этот момент такого элемента не будет, поэтому это событие не будет присвоено какому-либо элементу.
3. Позже, когда вы нажмете на Button A него, вы измените его id , но событие будет привязано к element самому себе, поэтому событие не будет изменено, и оно продолжит запускать ту же старую функцию.

Решение 1

1. Обновите существующую $('#btnSendInvoice').click(function() { функцию и добавьте условный код, используя такие условия, как if ($(this).attr("id") == "btnSendInvoice") { amp; if ($(this).attr("id") == "btnSetPayment") { . Полный код, как показано ниже.

 // Btn Send Invoice $('#btnSendInvoice').click(function() {  if ($(this).attr("id") == "btnSendInvoice") {  console.log("BUTTON A")  $("#btnSendInvoice").text("Button B")  $("#btnSendInvoice").attr("id", "btnSetPayment")  } else if ($(this).attr("id") == "btnSetPayment") {  console.log("BUTTON B")  } }); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"gt;lt;/scriptgt; lt;button id="btnSendInvoice"gt;Button Alt;/buttongt; 

Решение 2

1. Вы можете использовать delegate привязку с помощью $(document).on("click", "#btnSendInvoice" . Используя это, он свяжет событие document и по щелчку мыши попытается найти delegate event использование id текущего элемента или любого другого допустимого selectors . Так что это сработает. Попробуйте, как показано ниже.

P.S. Delegate события могут повлиять на производительность.

 $(document).on("click", "#btnSendInvoice", function() {  console.log("BUTTON A")  $("#btnSendInvoice").text("Button B")  $("#btnSendInvoice").attr("id", "btnSetPayment") });  // Btn Set Payment $(document).on("click", "#btnSetPayment", function() {  console.log("BUTTON B") }); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"gt;lt;/scriptgt; lt;button id="btnSendInvoice"gt;Button Alt;/buttongt;