0

我正在为我的投资组合构建一个带有一些附加功能的 Twitter 克隆。我正在使用 Web 组件的模板标签来创建推文模板，然后在单击发布推文按钮时使用 importNode 将其呈现到 DOM 中。这工作正常。

我添加了一个编辑按钮，单击该按钮应运行一个功能：

         tweetTemplate.content.querySelector('#button').onclick = () =>{
            createTweetContainer.style.display = "block";
            console.log("edit button clicked");
        }

但是，这不起作用。单击按钮时，创建推文容器应该可见。我还希望该按钮对于每个导入的模板都是唯一的，因为即使它是相同的模板，用户也应该能够编辑该特定推文。

我已经阅读了多个关于 Web 组件、自定义元素、影子 DOM 等的教程。但我一直坚持如何将它们结合在一起来完成这个特定的任务。

对后续步骤的任何帮助都值得赞赏。谢谢你。

JS 小提琴：https ://jsfiddle.net/manoj1234/zoL5s10g/12/

更新：

我现在已将事件侦听器添加到导入的节点而不是模板中：

tweetInstance.querySelectorAll('button')[0].onclick = () =>{
    createTweetContainer.style.display = "block";
    console.log("edit button clicked");
}

但我现在收到此错误：Uncaught TypeError: Cannot set property 'onclick' of undefined at HTMLButtonElement.postTweetButton.onclick (script.js:59)

4

1 回答 1

1

只需更改操作顺序即可。目前，您首先附加到 DOM，然后尝试附加事件处理程序。相反，首先附加事件处理程序，然后附加到 DOM。这是最终版本：

tweetInstance.querySelector('#button').onclick = () => {
    createTweetContainer.style.display = "block";
    console.log("edit button clicked");
}

// Then append to the DOM
pinnedTweet.after(tweetInstance);

发生这种情况的原因是当您使用 时importNode，它实际上返回了DocumentFragment. 的内在属性DocumentFragment是，当您将其子项附加到实际的 DOM 树时，它会变为空。所以，querySelector对片段没有影响。因此，理想的工作流程DocumentFragment是先完成所有操作，然后最后附加到 DOM。

于 2020-08-04T04:39:23.563 回答