jQuery не регистрируется Нажмите

Question

Проблема, с которой я сталкиваюсь, заключается в том, что я могу щелкнуть по элементу, чтобы начать, и все работает соответственно, однако после того, как я нажимаю клавишу S, чтобы изменить элемент из абзаца textarea->, я больше не могу клик и отсутствие кликов.

$(document).ready(function() { 
    $('#dynamic').click(function() { 
     log('`Clicked`'); 
     var text = $('#dynamic').text(); 
     $('#dynamic').replaceWith('<textarea id="dynamic">' + text + '</textarea>'); 
    }); 

    $(document).keydown(function(e) { 
     log(e.which); 
     switch(e.which) { 
      // S key 
      case 83: 
       if ($('#dynamic').is('textarea')) { 
        var text = $('#dynamic').val(); 
        $('#dynamic').replaceWith('<p id="dynamic">' + text + '</p>'); 
       } 
       break; 
      default: return; 
     } 
     e.preventDefault(); 
    }); 
}); 

Это код, который я использую, и он регистрирует первый клик, но не второй после преобразования элемента. :)

Answer 1

Элемент, который возвращается $('#dynamic'), больше не существует. Вы должны будете использовать делегирование событий, чтобы связать обработчик события:

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

Answer 2

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

$(document).on('click', '#dynamic', function() { 
    if (this.tagName === "TEXTAREA") return; // already a textarea, so no action needed 
    log('`Clicked`'); 
    var text = $('#dynamic').text(); 
    $('#dynamic').replaceWith('<textarea id="dynamic">' + text + '</textarea>'); 
});