jQuery .html() не устанавливает html вообще

Question

У меня есть простая вещь. Когда пользователь нажимает на ссылку edit, он превращает предыдущий элемент в элемент input для редактирования, а edit - в cancel. Если пользователь решает не редактировать, он может нажать на cancel, и все должно вернуться в исходное состояние.

Сейчас это не работает вообще:

$('.cancel').on('click', function() { 
    $(this).parent().html("<a href='#'>edit</a>"); 
}); 

HTML:

 <div class='photo-section'> 

      <div class='photo-head'> 
       <div class='photo-info'> 
        Photo Name : <span class='photo-name'>Work selfie</span> 
        <span class='title-edit'><a href='#'>edit</a></span> 
       </div> 
      </div> 

      <div class='photo'> 
       <img src='' alt='' title=''> 
      </div> 

      <div class='tag-section'> 
       <div class='tags'>Photo Tags: 
        <span>#code#coffee#late#night</span> 
        <span class="tags-edit"><a href="#" class="">edit</a></span> 
       </div> 
      </div> 

     </div>  

CSS:

// JavaScript to handle photo operations 

$(document).ready(function() { 

    // show/hide edit option 
    $('.photo-info, .tags').hover(function() { 
     $(this).find('.title-edit > a, .tags-edit > a').addClass('visible'); 
    }, function() { 
     $(this).find('.title-edit > a, .tags-edit > a').removeClass('visible'); 
    }); 

    // show editable area 
    $('.title-edit, .tags-edit').on('click', function() { 
     edit(this); 
    }); 

}); 

function edit(elem) { 
    // change element into an input elemnt for editing 
    var $item = $(elem).prev(); 
    var text = $item.text(); 
    $item.html("<input type='text'>").find('input').attr('value', text); 

    // change edit to cancel if input element present 
    if ($('input').length) { 
     $item.next().html("<a href='#' class='cancel'>cancel</a>"); 
    } 

    // change cancel back to edit 
    if ($('.cancel').length) { 

     $('.cancel').on('click', function() { 
      $(this).parent().html("<a href='#'>edit</a>"); 
     }); 
    } 
} 

Результат: https://jsfiddle.net/hgwkxygz/6/ Любая помощь будет здорово!

Answer 1

Это очень распространенный случай подключения события в неправильное время в javascript. На самом деле вы удаляете и повторно добавляете элемент DOM. Таким образом, уже прикрепленное событие к .cancel не будет работать на этот раз. Вы снова должны написать прослушиватель событий на .cancel всякий раз, когда вы присоединяете новый элемент DOM после нажатия кнопки редактирования.

В основном это означает, что когда вы делаете .html(), вам нужно повторно добавить прослушиватель событий для клика.

Существует множество способов решения этой проблемы.

1) создать функцию, которая прикрепляет элемент DOM, а также событие click к этому элементу DOM. Вызовите эту функцию только при нажатии событий.

2) Делегирование событий.

3) Не удаляйте элементы DOM при нажатии событий, а скрывайте и показывайте элементы, чтобы вы не потеряли слушателей событий.

4) Если вам действительно нужно удалить и повторно добавить элементы DOM, то, на мой взгляд, лучший подход - создать класс, в котором вы создадите элементы DOM, добавить слушателей событий в частном порядке в этом классе и в событиях кликов просто создайте новый экземпляр этого класса.

Вы можете подробно ознакомиться с этими параметрами в Интернете.