0

我有一个替换内容的 Web 应用程序。此内容具有 jquery ui 检查按钮。如果按钮已存在，则当我替换内容时，请不要再次添加它：

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

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

我使用 Backbone.js 替换内容

jsfiddle

如何解锁检查按钮？

4

2 回答 2

3

你在复制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 元素相关联，一切都崩溃了。

解决方案是停止使用 a<div>来存储您的模板。如果您使用 a<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. 不要将模板存储在 hidden 中<div>，将它们存储在<script>具有type其他属性的 s 中，text/html以便浏览器不会尝试将它们解释为 HTML。
于 2013-02-07T05:46:40.017 回答
0

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

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

于 2013-02-07T05:39:20.010 回答