时间戳

首页 > 解决方案 > 在创建新 div 时显示 div/section 内的内容

javascript - 在创建新 div 时显示 div/section 内的内容

问题描述

我正在创建一个您可以接受或拒绝的“小部件/弹出窗口”。我创建了一个带有 3 个按钮（隐藏、接受和拒绝）的 div。当我用 display:block 显示它时，它会正确显示。但是，如果我创建一个具有相同 ID 的新小部件，则会显示相同的小部件，但没有按钮。

这是 HTML

<div id="feedback" class="alert alert-success alert-danger" role="alert" style="display:block" >
    <button id="hide" >X</button>
    <button id="decline" >Weigeren</button>
    <button id="accept" >Akkoord</button>
</div>

这就是我制作新弹出窗口的地方（点击按钮）：

let fw = new FeedbackWidget("feedback")
$("#ok").on("click", function(){
    fw.show("NEW WIDGET", "success"); // first param is message and second is the type (green or red)
});

show 方法是根据参数显示小部件/弹出窗口。

所以，问题是：如何用按钮显示一个新的 div，而不丢失这些按钮的功能？

标签： javascripthtmljquerycss

解决方案

我相信，当您尝试创建具有相同 id 的新小部件时，它会用自己的内容替换内部内容并显示它。所以你可能不会在小部件中获得按钮。这可能会帮助您获得按钮，当您的内部文本消失并显示不同的内容但不显示按钮时，我刚刚创建了一个场景，因此我在弹出窗口中注入了按钮。

只需在您的代码中查看按钮的唯一 ID。

$("#ok").on("click", function(){

 // your code
 $('#feedback').empty();
 //insert button
 addAcceptButton(document.getElementById('feedback'))
    
});
function addAcceptButton(elem) {
 var btn = document.createElement("button");
btn.innerHTML = "Akkoord";         
elem.appendChild(btn);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="feedback" class="alert alert-success alert-danger" role="alert" style="display:block" >
    <button id="hide" >X</button>
    <button id="decline" >Weigeren</button>
    <button id="accept" >Akkoord</button>
</div>
<button id="ok">
 click here
</button>
<div id="test">
This is test
</div>

推荐阅读