Javascript 如何使用jquery添加标题可编辑的按钮？

我有一个简单的部分，用户可以添加多个按钮点击，我希望这些按钮的名称是可编辑的，这意味着用户可以编辑和保存按钮标题，因为他们希望

以下是使用“单击添加”按钮时的UI外观

我希望用户能够通过在输入按钮名称上放置鼠标来添加按钮标题

当用户将鼠标放在输入按钮名称上时，一个简单的弹出文本区域将显示如下内容

$（文档）.ready（函数（）{
$（'#btn'）。在（'click'，function（）上{
var buttonWithText=$（“输入按钮名称”）
$（“.main container”）.append（带文本的按钮）；
})
})

.main容器{
高度：300px；
宽度：400px；
背景：红色；
}
.点击区域{
高度：60px；
宽度：50%；
/*利润率：20px*/
背景：绿色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：80px自动；
}
#btn{
光标：指针；
利润率：20px；
}

添加按钮

对于一个非常简单的解决方案，您可以使用

提示符

：

$（文档）.ready（函数（）{
$（'#btn'）。在（'click'，function（）上{
let text=prompt（'输入按钮文本：'）；
var按钮，其文本=$（“”+text+“”）
$（“.main container”）.append（带文本的按钮）；
})
})

.main容器{
高度：300px；
宽度：400px；
背景：红色；
}
.点击区域{
高度：60px；
宽度：50%；
/*利润率：20px*/
背景：绿色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：80px自动；
}
#btn{
光标：指针；
利润率：20px；
}

添加按钮

如果我理解正确，您想要的功能如下所示。您可以通过利用

addEventListener

来实现这一点，然后创建一个新按钮并单击将其添加到DOM中：

编辑：

我已根据您的评论更新了代码。我相信它现在根据您描述的第二种情况工作。如果这似乎不是所需的功能，请告诉我

函数init（）{
const buttonEl=document.querySelector（“#button el”）；
const buttonContainer=document.querySelector（“#按钮容器”）；
const alertButtonText=e=>alert（`youclicked:${e.target.value}`）；
常量promptForText=e=>{
const text=window.prompt（'Enter button text'）；
if（text&&text.trim（）.length）{
e、 target.setAttribute（'value'，text）；
e、 target.removeEventListener（'mouseover'，promptForText）；
e、 target.addEventListener（“单击”，alertButtonText）；
}
}
Buttonnel.addEventListener（'click'，e=>{
const newButtonEl=document.createElement（'input'）；
setAttribute（'type'，'button'）；
newButtonEl.addEventListener（'mouseover'，promptForText）；
按钮容器。附件子（纽布通奈尔）；
});
}
init（）
#按钮容器>输入{
高度：30px；
宽度：40%；
背景：绿色；
显示：块；
对齐项目：居中；
保证金：20px自动；
}
身体{
背景：红色；
}
#按钮el{
光标：指针；
利润率：20px；
}

请注明“按钮名称”。您是指按钮上的文本还是指按钮的名称属性？这是两件完全不同的事情。我是说按钮上的文本，@dqhendricks你是说我想要的东西可以通过使用bootstrap模式来实现吗？你所要做的就是这样：
var buttonext=document.getElementById（“buttonext”）.value。在你的模式中创建一个输入字段，如
，让用户在那里键入按钮文本。好的，兄弟，谢谢，我会尝试，如果你希望你可以添加答案，如果它符合我的要求，我会接受。thxooh bro那是qucik，我可以使用引导模式来解决你的问题吗？我需要特别使用prompt？我不是引导用户，所以我不能帮你。@user9964622你可以使用任何你想要的。基本上，在add button click（添加按钮点击）事件中，您可以从模式中的文本区域获取文本，并实现connexo在这里所做的相同方式。好的，我只是想成为一个更友好的用户，以便我可以使用save buttonHi将数据保存到json，用户添加按钮，然后出现一个弹出窗口，询问按钮名称，就像@connexo所做的一样，或者用户添加按钮，然后将鼠标放在按钮标题上，弹出窗口要求用户输入按钮名称，我更喜欢第二种解决方案