Question

我有一个替换内容的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>将通过for属性与两个DOM元素相关联，并且一切都会崩溃。

解决方案是停止使用<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/

这里有两个快速课程：

拥有有效的HTML非常重要。
请勿将模板存储在隐藏的<div>中，并将其存储在<script>中，且type属性不是text/html，以便浏览器不会尝试解释它们是HTML。

Answer 2

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

如果你想做正确的事情以避免长期问题和副作用，你应该考虑提到的here。这样你的问题就解决了，没有其他的错误。

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

2 个答案: