Javascript 如何使用引导模式和按钮创建可重用的确认控件？

目前，我正试图让用户能够通过打开引导模式以及为不同的功能使用相同的模式来确认某些内容。在这个问题中，我将使用一个“计算器”类型的元素作为附加功能的示例。现在，除非我添加JQuery的

$target.off（），否则确认将不起作用到
targetModal.on（“hidden.bs.modal”，函数（e）{}）

当我添加这段JQuery代码时，它将导致我在此页面上使用的任何其他功能（关于引导模式）也被破坏，这意味着我需要为这些功能中的任何一个添加额外的代码。我不希望这种情况发生。如何使这些确认正常工作，同时保持其他功能正常工作，而不为这些功能添加额外代码

应该发生什么：

当选择“否”时，按钮（显然是“否”）应保持相同的颜色，但是相反的按钮（是”按钮）应变为灰色，而“确认”按钮应变为禁用（如果尚未禁用）。此外，如果
挂起
可见，则应将其隐藏
选择“是”时，按钮（表示“是”）应保持相同的颜色，但相反的按钮（表示“否”的按钮）应变为灰色，而“确认”按钮应变为启用状态
单击“确认？”按钮时，应使用与确认相关的任何内容填充模态，并打开给定模态
当模式在确认过程中退出/关闭而未完成确认时，应执行功能
WillClose（）
（该功能应将给定确认控件的挂起按钮文本更改为“重试”）

成功执行确认后（通过单击给定模式内的“确认”按钮），该模式应隐藏/消失（并重置其中的内容），并执行
ConfirmModal（）
功能（该功能反过来应禁用给定确认控制的所有按钮，并将挂起的按钮文本更改为“确认”）
这些确认中的任何一项都应相互独立
正在发生的事情：

除非我将
$target.off（）
添加到模式中（例如
targetmodel.off（）
），否则确认元素会触发彼此的挂起按钮。但是，执行后一种操作将导致其他功能“中断”。我的意思是，无论在一个模态中“填充”、“插入”或“克隆”（无论你想叫它什么），它都会被多次放置在模态中（好像模态没有重置，有意义吗？）

我怎样才能完成以下工作


//字段：
//是选择器
const positiveSelector=“.positive”；
//无选择器
const negativeSelector=“.negative”；
//确认？选择器
const confirmSelector=“.init confirm”；
//挂起选择器
const pendingSelector=“.pending”；
//校准触发器选择器
常量calcTriggerSelector=“.calc触发器>按钮”；
//是元素
const positiveNodes=document.queryselectoral（positiveSelector）；
//无元素
const negativeNodes=document.querySelectorAll（negativeSelector）；
//确认？元素
const confirmNodes=document.queryselectoral（confirmSelector）；
//未决要素
const pendingNodes=document.queryselectoral（pendingSelector）；
//calcTrigger元件
const calcTriggerNodes=document.queryselectoral（calcTriggerSelector）；
//模态
const targetModalSelector=“#bs modal xl”；
常量targetModal=$（targetModalSelector）；
const$modalInit=targetModal.html（）；
//Eventlisteners：
forEach（node=>node.addEventListener（“单击”），函数（）{
EnableConfirmBtn（本）；
}));
negativeNodes.forEach（node=>node.addEventListener（“单击”），函数（）{
禁用确认（本）；
}));
confirmNodes.forEach（node=>node.addEventListener（“单击”），函数（）{
OpenConfirmModal（本）；
}));
forEach（node=>node.addEventListener（“单击”，calcTrigger））；
//关闭时重置模式
targetModal.on（“hidden.bs.modal”），函数（）{
html（$modalInit）；
});
//方法：
功能启用确认（ele）{
ele.classList.add（“btn成功”）；
ele.parentNode.querySelectorAll（negativeSelector.forEach（node=>node.classList.remove（“btn警告”））；
ele.parentNode.parentNode.querySelectorAll（confirmSelector.forEach（node=>node.removeAttribute（“禁用”）；
}
功能禁用确认（ele）{
ele.classList.add（“btn警告”）；
ele.parentNode.queryselectoral（positiveSelector.forEach（node=>node.classList.remove（“btn成功”）；
ele.parentNode.parentNode.querySelectorAll（confirmSelector.forEach（node=>node.setAttribute（“已禁用”）；
}
函数OpenConfirmModal（ele）{
ele.parentNode.querySelectorAll（pendingSelector.forEach（node=>node.style.display=“inline block”）；
ele.parentNode.querySelectorAll（pendingSelector.forEach（node=>node.classList.remove（“btn警告”））；
ele.parentNode.queryselectoral（pendingSelector.forEach（node=>node.classList.add（“btn危险”））；
ele.parentNode.querySelectorAll（pendingSelector.forEach（node=>node.textContent=“Pending”）；
$（targetModalSelector+“.modal body”）.html（$（“.clone one”）.clone（））；
$（targetModalSelector+“.clone one”）.show（）；
$（targetModalSelector+“h4.模式标题”）。文本（“”）；
$（targetModalSelector+“.modal content.modal footer”）.html（“”）；
targetModal.modal（）；
targetModal.on（“单击“，”.clone one”，函数（）{
targetModal.modal（“隐藏”）；
确认模式（ele）；
});
targetModal.on（“隐藏的bs.modal”，函数（e）{
WillClose（ele）；
//使用targetModal.off（）；此处？node.textContent=“已确认”）；
ele.parentNode.queryselectoral（pendingSelector.forEach（node=>node.classList.remove（“btn危险”、“btn警告”））；
ele.parentNode.queryselectoral（pendingSelector.forEach（node=>nod