Как я могу заставить события действий работать со строками шаблона

Проблема

Визуализированные события буквального действия HTML-шаблона не будут работать

Стек MEVN с рулем

код

renderData.js

const template = function (data)  {
  return `<div class = "vvn_siteContent sc_flex">
  <span class = "sc_flex">
    <img src = "https://images.wallpaperscraft.com/image/single/keyboard_backlight_light_159518_1280x720.jpg" alt = "" class = "sc_img">
    <div class = "sc_flex sc_column">
      <label class = "sc_label">${data.category} :: ${data.titles.main}</label>
      <div class = "sc_desc" style = "word-wrap: break-word">
 ${data.desc.main}

      </div>
      <div class = "vvn_editTypes">
        <button class = "sc_button sc_resetBTN">Delete</button>
       <button class = "sc_button sc_scheduleBTN" >Hide</button>
        <button class = "sc_button sc_sendBTN" dataset-data = "${data._id}" onclick = "myData()" >Edit!</button>
      </div>
    </div>
  </span>
</div>`
}

export const renderData = function (key) {
  const keyToLowerCase = key.toLowerCase();
  const getKeyData = handleJSON(keyToLowerCase);
  getContainer.innerHTML = " ";
  const parser = new DOMParser();
  for (let i = 0; i < getKeyData[0][0].pageContent.length; i++) {
    const { ...data } = getKeyData[0][0].pageContent[i];

    const html = template(data);
    const parsedDoc = parser.parseFromString(html, "text/html");
    getContainer.append(...parsedDoc.body.children);
  }
}

oneCRUD.js //это файл, который загружается через

<script type = "module" src = "../js/OneCRUD.js" type = "text/javascript" data = "{{data2}}"></script>

этот тег сценария находится внизу index.html

const allBtns = document.querySelectorAll('.vvn_editTypes').forEach(el => el.addEventListener('click', (e) => {
    console.info(e.target)
    console.info(e)
    if (e.target.textContent === 'Delete') console.info('Deleting')
    if (e.target.textContent === 'Hide') console.info('Hiding')
    if (e.target.textContent === 'Edit!') console.info('Editing')
}))

function myData () {
    console.info('this wont get called even if i gave the button onclick = "myData()")
}

Если я попытаюсь вызвать функцию в onclick, я получу ошибку function name undefined

Моя проблема довольно проста. Я пытаюсь прикрепить события к кнопкам в renderData.js из файла oneCRUD.js, и это не работает.

Благодарим за помощь

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

я нашел решение

код

const allBtns = document.querySelectorAll('.vvn_siteContent').forEach(el => el.addEventListener('click', (e) => {
    console.info(e.target)
    console.info(e)
    if (e.target.textContent === 'Delete') console.info('Deleting')
    if (e.target.textContent === 'Hide') console.info('Hiding')
    if (e.target.textContent === 'Edit!') console.info('Editing')
}))

обратите внимание, как элемент, который я выбираю, находится внутри литерала шаблона

Мне нужно выбрать родителя этого элемента.

так что теперь мой код выглядит так:

const allBtns = document.querySelectorAll('.vvn_siteContentList').forEach(el => el.addEventListener('click', (e) => {
    console.info(e.target)
    console.info(e)
    if (e.target.textContent === 'Delete') console.info('Deleting')
    if (e.target.textContent === 'Hide') console.info('Hiding')
    if (e.target.textContent === 'Edit!') console.info('Editing')
}))

теперь функция allBtns работает.

почему это работает?

Это хороший вопрос

Другие вопросы по теме