如何当内容被替换Backbone.js的解锁jQuery UI的复选按钮？(How to unloc

我有一个web应用它取代的内容。 此内容拥有jQuery UI的复选按钮。 当我更换内容，如果一个按钮已经存在，那么不要再添加它：

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

如果我按下按钮（它的状态进行检查），如果我更换内容，按钮启动锁定，直到相同的内容再次更换。

我使用Backbone.js的更换内容

的jsfiddle

我怎样才能解开检查按钮？

Answer 1:

要复制id属性，并导致不好的HTML，HTML不好导致沮丧，挫折导致愤怒等

你在你的模板，你已经隐藏里面有这样<div>

<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>

然后，您插入相同的HTML到您.content-central 。 现在，你必须在你的页面两个元素具有相同id属性和两个<label>指向它们的元素。 当您添加了jQuery UI的按钮包装，你最终与你的略加修改<label>为您的复选框可见元素; 但是，也<label>下面将通过两个DOM元素相关联的for属性和一切散开。

解决的办法是停止使用<div>来存储您的模板。 如果您使用<script>相反，浏览器将无法解析的内容为HTML，你会不会有重复的id属性。 事情是这样的：

<script id="template-central-home" type="text/x-template">
    <div data-template-name="">
        <input type="checkbox" class="checkWeek" id="checkWeekM" />
        <label for="checkWeekM">L</label>
    </div>
</script>

然后这个访问HTML：

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

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

这里有两个快速的教训：

1. 拥有有效的HTML是非常重要的。
2. 不要存放在隐藏模板<div> S，它们存储在<script> s的一个type属性以外text/html ，使浏览器不会尝试将其解释为HTML。

Answer 2:

我参加了一个详细的看看你的小提琴，你提到了这个问题之后。 我提出的解决方案在这里更像是一个权宜之计。

如果要按照正确的事情，以避免长期的问题和副作用，你应该考虑什么是提到这里 。 这样，你的问题就解决了，并没有其他的bug。

文章来源: How to unlock a jquery ui check button when content is replaced with Backbone.js?