当用Backbone.js替换内容时，如何解锁jquery ui检查按钮？

我有一个Web应用程序替换内容。 这个内容有jquery ui检查按钮。 如果按钮已经存在则替换内容，则不要再次添加：

if(!$('label[for=checkWeekM]').hasClass('ui-button')) $('.checkWeek').button(); 

如果我按下按钮（检查其状态）并且如果我更换内容，则按钮开始锁定，直到再次替换相同的内容。

我使用Backbone.js来替换内容

的jsfiddle

如何解锁检查按钮？

Answer 1

你正在复制id属性，这会导致糟糕的HTML，糟糕的HTML导致沮丧，沮丧导致愤怒等。

您在模板中有这个隐藏在

：

  L 

然后将相同的HTML插入到.content-central 。 现在，页面中有两个元素具有相同的id属性，两个元素指向它们。 当您添加jQuery-UI按钮包装器时，最终会将的略微修改版本作为复选框的可见元素; 但是， 将通过for属性与两个DOM元素相关联，并且一切都会崩溃。

解决方案是停止使用

来存储模板。 如果您改为使用 ，则浏览器不会将内容解析为HTML，也不会有重复的id属性。 像这样的东西：

然后这个访问HTML：

 content.view = new ContentView({ model: content, template: $('#template-' + template_name).html() }); 

演示： http ： //jsfiddle.net/ambiguous/qffsm/

这里有两个快速课程：

1. 拥有有效的HTML非常重要。
2. 不要将模板存储在隐藏的

   ，将它们存储在带有text/html之外的type属性的 ，以便浏览器不会尝试将它们解释为HTML。

Answer 2

在你提到这个问题后我仔细看了你的小提琴。 我在这里建议的解决方案更像是一个快速解决方案。

如果你想遵循正确的方法来避免长期问题和副作用，你应该考虑这里提到的内容。 这样你的问题就解决了，没有其他的bug。