Я пытаюсь создать список дел с кнопкой редактирования, при нажатии на которую добавленные элементы будут доступны для редактирования, но у меня возникли проблемы. У меня есть созданная кнопка и все такое, но когда я нажимаю на нее, ничего не происходит. Будем признательны за любые советы!

JavaScript

function editItem(){
    var parent = $(this).parent();
    if (!parent.hasClass('edit')) {
        parent.addClass('edit');
    }else if (parent.hasClass('edit')) {    
        var editTask = $(this).prev('input[type="text"]').val();
        var editLabel = parent.find('label');
        editLabel.html(editTask);
        parent.removeClass('edit');
    }

$(function(){
    $(document).on('click', 'edit', editItem)
});

Rassisland

Ответов: 1

Ответы (1)

Похоже, вы нацеливаетесь на , вы должны использовать .edit:

$(function(){
    $(document).on('click', '.edit', editItem);
});

Рабочий фрагмент

$ (function () {
  function addItem () {
    // добавляем в список
    $ ("# todo-items"). append ('
  • ' + $ ("# todo"). val () + ' Изменить & bull; Удалить
  • '); // очищаем текст $ ("# задача"). val (""); } $ ("# todo"). keydown (function (e) { // если нажата клавиша ввода если (e.which == 13) Добавьте предмет(); }); // при нажатии кнопки добавления $ ("# добавить"). click (addItem); // делегируем события динамически генерируемым элементам // для кнопки редактирования $ (document) .on ("click", 'a [href = "# edit"]', function () { // делаем диапазон редактируемым и фокусируем его $ (this) .closest ("li"). find ("span"). prop ("contenteditable", true) .focus (); вернуть ложь; }); // для кнопки удаления $ (document) .on ("click", 'a [href = "# delete"]', function () { // удаляем элемент списка $ (this) .closest ("li"). fadeOut (function () { $ (это) .remove (); }); вернуть ложь; }); });
    * {font-family: 'Segoe UI'; маржа: 0; отступ: 0; стиль списка: нет; украшение текста: нет;}
    input, li {padding: 3px;}
    # todo-items small {display: inline-block; маржа слева: 10 пикселей; отступ: 2 пикселя; вертикальное выравнивание: низ;}
    # todo-items span: focus {background-color: #ccf;}
    
    
    
    

    2022 WebDevInsider