Question

我有一个html模板，我正在使用模板文字。该功能如下所示

// postCreator.js
export const blogPostMaker = ({ title, content, address, id }, deletePost) => {
  const innerHtml = `
  <blog-post>
    <h1 class='title'>${title}</h1>
    <p class='content'>${content}</p>
    <p class='address'>${address}</p>
    <button onclick='${() => deletePost(id)}'>Delete</button>
  </blog-post>
  `
  return innerHtml
}


//Blog.js
  postHelper.getSeriesOfPosts(10)
  .then(resp => {
    resp.forEach(post => (blogDiv.innerHTML += blogPostMaker(post, postHelper.deletePost)))
  })

我无法弄清楚如何让onclick工作。我已经尝试将Blog.js中的anon函数传递给postCreator，但没有运气。

有什么想法吗？

Answer 1

如果您不想全局公开事件回调，则应将其附加到代码的JS部分addEventListener()：

// postCreator.js
export const blogPostMaker = ({ title, content, address, id }) => 
  `
  <blog-post id='${id}'>
    <h1 class='title'>${title}</h1>
    <p class='content'>${content}</p>
    <p class='address'>${address}</p>
    <button>Delete</button>
  </blog-post>
  `

//Blog.js
  postHelper.getSeriesOfPosts(10).then(resp => {
    resp.forEach(post => {
      blogDiv.innerHTML += blogPostMaker(post)
      blogDiv.querySelector(`blog-post[id="${post.id}"] > button`)
        .addEventListener('click', () => postHelper.deletePost(post.id))
  })

注意：这不是最有效的方法，但它会保留您的文件结构。

相反，我会直接使用<button>创建createElement()，然后使用appendChild()将其添加到DOM，或者我会使用DocumentFragment或<template>以避免所有querySelector()上的blogDiv。

如果您绝对想要使用内联JS而不暴露帮助程序，则需要将您的组件定义为组件（例如自定义元素）。

Answer 2

const markUp = `
    <button onclick="myFunction()">Click me</button>
`;

document.body.innerHTML = markUp;

window.myFunction = () => {
    console.log('Button clicked');
};

Answer 3

Miroslav Savovski's 解决方案有效，但他们没有解释原因，所以我想我会添加这个答案，并说明其背后的推理和实际工作方式的逐步说明，以及为什么 OP 的解决方案是最初不工作。

TLDR？滚动到最后两个代码片段。

对于模板文字，当您将函数放入其中时，它会执行该函数，所以假设我们有一个像这样的简单函数，它只返回一个 'blue' 字符串：

const getBlueColor = () => 'blue'

然后我们在模板文字中调用这个函数，如下所示：

`<div>${getBlueColor()}</div>`

结果是在执行该代码时立即调用 getBlueColor()。

现在假设我们想这样做 onclick 而不是这样：

`<div onclick="${getBlueColor()}"></div>`

这里发生的是 getBlueColor is not executed onclick`，它实际上是在执行此模板文字时执行的。

我们解决这个问题的方法是通过简单地删除它来防止模板文字执行这个函数，就像这样：

`<div onclick="getBlueColor()"></div>`

但现在假设您想将一些参数传递给像 getOppositeColor(color) 这样的函数：

`<div onclick="getOppositeColor(color)"><div>`

这将不起作用，因为 color 不会被定义。所以你需要用一个模板文字和这样的字符串包裹 that ：

`<div onclick="getOppositeColor('${color}')"><div>`

现在有了这个，您将在用户单击按钮时调用 onclick，并且您将向它传递一个 color 字符串，如下所示：

getOppositeColor('blue')

在模板文字中设置HTML按钮`onclick`

3 个答案: