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

How to unlock a jquery ui check button when content is replaced with Backbone.js?

本文关键字：解锁 jquery 按钮 检查 ui 何解锁 Backbone js 替换      更新时间：2023-09-26

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

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

如果我按下按钮（它的状态被选中），如果我替换内容，按钮将开始锁定，直到相同的内容再次被替换。

我使用Backbone.js来替换内容

jsfiddle

如何解锁检查按钮？

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

你的模板中有这个隐藏在<div>:中

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

然后将相同的HTML插入到.content-central中。现在，您的页面中有两个具有相同id属性的元素和两个指向它们的<label>元素。当您添加jQueryUI按钮包装器时，您最终会得到一个稍微修改过的<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/

这里有两个快速的教训：

  1. 拥有有效的HTML非常重要
  2. 不要将模板存储在隐藏的<div> s中，而是将它们存储在具有text/html以外的type属性的<script> s中，这样浏览器就不会试图将它们解释为HTML

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

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

相关文章：