jQuery - Замена элемента HTML несколько раз

Question

Я хочу заменить кнопку полем ввода, где пользователь что-то вводит и нажимает кнопку ввода. После этого кнопка с начала должна появиться снова. Мой скрипт работает до сих пор, но я не могу повторить это после его завершения.

Обновление: Кнопка также должна появиться снова, если поле ввода отображается, но пользователь не хочет ничего вводить и щелкает в другом месте.

Код:

<button id="createButton">Create item</button> 

/* 
    jquery stuff 
*/ 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
     $(document).ready(function() { 
      $('#createButton').click(function(event) { 
       $(this).replaceWith('<input type="text" id="buttonInput" placeholder="e.g. books, movies" autofocus>'); 
      }); 


      $(this).on('keypress', function (event) { 
       if(event.which == '13'){ // If enter button is pressed 
        alert('You entered something'); 

        $('#buttonInput').replaceWith('<button id="createButton">Create item</button>'); 
       } 
      }); 

     }); 
</script> 

Update 2: Я обновил код с шкурой() и шоу(), чтобы получить тот же результат. Но как я могу позволить вводу исчезнуть, если пользователь щелкнет где-то внутри тела без избыточности?

Новый код:

<button id="createButton">Create item</button> 
<input type="text" id="input" placeholder="e.g. books, movies" autofocus> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
    $(document).ready(function() { 
     $('#input').hide(); 

     $(document).on('click', '#createButton', function (event) { 
      $(this).hide(); 
      $('#input').show().focus(); 
     }); 

     $('#input').on('keypress', function (event) { 
      if (event.which == '13') { // if enter button is pressed 
       $(this).hide().val(''); 
       $('#createButton').show(); 
      } 
     }); 
    }); 
</script> 

Answer 1

Как другие ответы говорят, вы заменяете элемент (createButton), что означает, что обработчик click больше не связан.

Вы можете либо перевязать, либо привязать к родительскому элементу с помощью селектора #createButton, используя on.

$(document).on('click','#createButton', function(event) { 
    ... 
}); 

Не на самом деле использовать document - использовать любые родительский элемент является, который не получает заменить

Замена DOM элементов является плохой подход, хотя (в div, возможно?) - вы» d лучше оставить элементы на странице и использовать show и hide.

http://jsfiddle.net/v03j8bns/

Обновлено Ответ

Here's a fiddle показывая show/hide/подход.Для обработки:

Кнопка также должна появиться снова, если поле ввода отображается, но пользователь не хочет ничего вводить и щелкает в другом месте.

При нажатии кнопки я вызываю focus() в текстовое поле. Я также подключил обработчик событий blur(), поэтому, если пользователь нажимает/выворачивает, он скрывает текстовое поле и показывает кнопку.

Answer 2

Вы должны связать событие нажатия на вновь созданную кнопку еще раз:

 $(document).ready(function() { 
 
      $('#createButton').click(function (event) { 
 
       $(this).replaceWith('<input type="text" id="buttonInput" placeholder="e.g. books, movies" autofocus>'); 
 
      }); 
 

 

 
      $(this).on('keypress', function (event) { 
 
       if (event.which == '13') { // If enter button pressed 
 
        //Disable textbox to prevent multiple submit 
 
        alert('You entered something'); 
 

 
        $('#buttonInput').replaceWith('<button id="createButton">Create item</button>'); 
 
       } 
 

 
       $('#createButton').bind('click', function (event) { 
 
        $(this).replaceWith('<input type="text" id="buttonInput" placeholder="e.g. books, movies" autofocus>'); 
 
       }); 
 
      }); 
 
     });

Answer 3

Вы имеете эту проблему, так как заменить DOM элементов , Это означает, что у вашей кнопки нового элемента больше нет обработчика кликов.

Я бы порекомендовал вам использовать что-то вроде show/hide или использовать делегат jQuery on/bind для обработки щелчка.

Answer 4

Когда вы меняете DOM на лету и хотите автоматически назначать слушателям элементы, которые могут или не могут существовать в определенные моменты времени, вам необходимо использовать delegated event listeners.

$(document).on('click', '#createButton', function() { ... }); 
$(document).on('click', '#buttonInput', function() { ... }); 

Эти обработчики будут работать, однако вы скрещиваете DOM.