Блог

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

     showItem () {
        const Id = this.dataset.product_id;
        const ItemBlock = document.getElementById(Id)
        const Template = renderItemNormalView();
        const HTML = Template(ItemBlock.dataset);
        ItemBlock.innerHTML = HTML;
        const editBtn = ItemBlock.querySelector('.js-edit-item');
        editBtn.addEventListener('click', this.showItemEditor);
    }

    showItemEditor () {
        const id = this.dataset.product_id;
        const itemBlock = document.getElementById(id);
        const template = renderItemEditView();
        const HTML = template(itemBlock.dataset);
        itemBlock.innerHTML = HTML;
        const saveChanges = itemBlock.querySelector('.js-save-item-changes');
        saveChanges.addEventListener('click', this.showItem);
    }
  

В первый раз функция showItemEditor вызывается щелчком мыши, но после рендеринга страницы showItem не добавляется как onclick . Я новичок в js, поэтому я не понимаю, в чем может быть проблема.

Ну, это было сложно, по крайней мере, для меня. Проблема заключалась в том, что «this» для обеих моих функций был не класс, который их содержит, а кнопки, на которые я пытался нажать onclick, поэтому выражения «this.showItem» и «this.showItemEditor» просто не имели смысла. Я удивлен, что firefox не сказал мне об этом. Но я рад, что все закончилось 🙂