动态分配jQuery按钮部分失败

我有一个用户可以选择模板的布局。根据用户单击的按钮，计算并更新所有按类名匹配的按钮

假设我有4个按钮用于四个不同的模板。当然，每个按钮都可以点击。单击的按钮应成为新激活的模板，其他按钮应重置，因为在另一个模板激活之前。我想我已经解决了这个问题，但出于某种原因，当我想重新分配一个新按钮时，只有最后一个按钮被替换为一个新按钮。前面的其他按钮不可用

JSFIDLE中提供的情况并不是一个完整的功能解决方案，但我很好奇为什么只有最后一个按钮被正确处理。有人能告诉我更多关于这件事吗

可以找到小提琴：。这是一个工作示例，提供了显示示例的裸代码

代码如下：

HTML:

JS

---

当我单击您提供的JSFIDLE中的一个按钮时，我会看到您在单击的地方激活的文本。除一个按钮外，所有其他按钮均消失。单击其余按钮时，该按钮没有任何功能

因此，有些事情可能会对你有所帮助：

问：为什么点击后只有一个按钮可见

答：在$each循环外创建OBUTTONON。所以只有一个按钮可以放在HTML的某个地方。它不是重复的。因此，当您遍历循环时，最后一个包含$this.replaceWithoNewButton的按钮；将创建。在此之前的任何其他通话均无效

为了避免这种情况，您需要每次创建一个新按钮

 var oNewButton = $('<button class="activate-tpl" data-template-name="">activate template</button>').button();

问：为什么新按钮对点击没有反应

答：新按钮实际上是新的对象，与旧按钮无关。因此，单击事件处理程序$'。激活tpl'。单击。。没有任何效果，因为新按钮是在注册单击处理程序后创建的

为了解决这个问题，我建议保留旧的按钮，只需更改您想要更改的内容。单击它们并显示模板时，您可以使用.hide隐藏它们

希望能有帮助

---

编辑：这里有一个我认为您想要的示例：

当我在您提供的JSFIDLE中单击一个按钮时，我看到您在单击的地方激活了我的文本。除一个按钮外，所有其他按钮均消失。单击其余按钮时，该按钮没有任何功能

因此，有些事情可能会对你有所帮助：

问：为什么点击后只有一个按钮可见

答：在$each循环外创建OBUTTONON。所以只有一个按钮可以放在HTML的某个地方。它不是重复的。因此，当您遍历循环时，最后一个包含$this.replaceWithoNewButton的按钮；将创建。在此之前的任何其他通话均无效

为了避免这种情况，您需要每次创建一个新按钮

 var oNewButton = $('<button class="activate-tpl" data-template-name="">activate template</button>').button();

问：为什么新按钮对点击没有反应

答：新按钮实际上是新的对象，与旧按钮无关。因此，单击事件处理程序$'。激活tpl'。单击。。没有任何效果，因为新按钮是在注册单击处理程序后创建的

为了解决这个问题，我建议保留旧的按钮，只需更改您想要更改的内容。单击它们并显示模板时，您可以使用.hide隐藏它们

希望能有帮助

---

编辑：这里有一个我认为你想要的例子：

这是你的新提琴：

我注意到了几件事：

-我更改了你的.attrdata模板名称；to.datatemplate名称； -循环没有重新扫描更改的模板，因为您正在从中删除类activate tpl！我在这个类中添加了跨距。 -由于动态替换的内容，我已将您的单击事件更改为使用.on

---

这是你的新小提琴：

我注意到了几件事：

-我更改了你的.attrdata模板名称；to.datatemplate名称； -循环没有重新扫描更改的模板，因为您正在从中删除类activate tpl！我在这个类中添加了跨距。 -由于动态替换的内容，我已将您的单击事件更改为使用.on

---

我不确定我是否理解你的问题。单击按钮时的预期行为是什么？应该用文本替换，对吗？其他的按钮应该复位。你这是什么意思？点击的按钮应该替换为文本，其他三个按钮应该替换为三个新按钮。奇怪的是，只更换了最后一个按钮。当我尝试用同样的方法将所有项目替换为文本时，它会按预期工作$这个。替换为“一些文本”；好的，我明白了。那么我的回答可能会对你有所帮助@Ben-我想我已经按照你的意愿工作了，如果有帮助，请告诉我！我不确定我是否理解你的问题。单击按钮时的预期行为是什么？它应该被替换为w

---

有文字，对吗？其他的按钮应该复位。你这是什么意思？点击的按钮应该替换为文本，其他三个按钮应该替换为三个新按钮。奇怪的是，只更换了最后一个按钮。当我尝试用同样的方法将所有项目替换为文本时，它会按预期工作$这个。替换为“一些文本”；好的，我明白了。那么我的回答可能会对你有所帮助@Ben-我想我已经按照你的意愿工作了，如果有帮助，请告诉我！谢谢你的反应+1.我想如果我在外面做一个按钮，每个按钮都有一个定义好的按钮实例，通过将obbutton分配给oNewButton，我可以多次使用它。在充满希望的足球周之后，荷兰向德国致意；谢谢你的反应+1.我想如果我在外面做一个按钮，每个按钮都有一个定义好的按钮实例，通过将obbutton分配给oNewButton，我可以多次使用它。在充满希望的足球周之后，荷兰向德国致意；谢谢你的回复。这真的很有帮助，也是Fredrike S.提供的答案。从这里开始，我可以开始真正的工作+1并接受。感谢您的回复。这真的很有帮助，也是Fredrike S.提供的答案。从这里开始，我可以开始真正的工作+1并接受。

 var oNewButton = $('<button class="activate-tpl" data-template-name="">activate template</button>').button();

if(data.data("template-name") != sClicked || !data.is("button")) { 
    var oButton = $('<button class="activate-tpl" data-template-name="' + $(this).data("template-name") + '">activate template</button>').button();

    $(this).replaceWith(oButton);
} else { 
    $(this).replaceWith('<span class="activate-tpl">You\'ve activated me!</span>');
}

data.replaceWith('<span class="activate-tpl" data-template-name="' + sClicked + '">You\'ve activated me!</span>');