0

我有如下的html：

<ul class="group">
    <label class="category">
        <div class="lightpoint">
                <input type="checkbox" class="parentB" value="{{>name}}" /><label></label>
        </div>
    </label>
    <li>
        <div class="lightpoint">
                <input type="checkbox" class="childB" value="{{>name}}" ><label></label>
        </div>
    </li>
</ul>

以上 html 片段是由 Jquery 动态添加的。

javascript:

$('.parentB').on("click", function(event){
                var isChecked = $(this).is(':checked');
                $(this).parent().parent().siblings().find('.childB').attr("checked", isChecked);
    });

我使用firefox检查了firebug中html的变化。单击“.parentB”时，“.childB”的选中状态会被真正修改。但看起来什么都没有发生。我的意思是它应该看起来与相应的检查状态，但实际上不是。

它是由 CSS3 引起的吗？

现在我有了答案。我没有把自己说得很清楚。我使用的 jquery 版本是 1.9.0，这只是关于 jquery 版本。当我将其更改为 1.8.3 时它运行良好。

4

2 回答 2

0

你有无效的 htmlul应该有li这样的直接孩子。您的脚本正在运行，但更改 html 需要更改脚本

现场演示

<ul class="group">
   <li>  
    <label class="category">
        <div class="lightpoint">
            <input type="checkbox" class="parentB" value="{{>name}}" />
            <label></label>
        </div>
    </label>
    </li>   
    <li>
        <div class="lightpoint">
            <input type="checkbox" class="childB" value="{{>name}}">
            <label></label>
        </div>
    </li>
</ul>

$('.parentB').on("click", function (event) {
    var isChecked = $(this).is(':checked');
    $(this).closest('li').next('li').find('.childB').attr("checked", isChecked);
});
于 2013-01-23T16:22:10.063 回答
0

.parentB执行该脚本时不存在，因此实际上没有处理程序被绑定。

你有2个选择，

  1. 通过将处理程序绑定到父元素并查找目标元素来使用委托事件。别担心，使用正确的语法。jQuery 可以很好地为您做到这一点。见下文，

    $(document).on('click', '.parentB', function(event){
   var isChecked = $(this).is(':checked');
   $(this).parent().parent().siblings().find('.childB').attr("checked", isChecked);
});

  2. 将这些动态 html 附加到 DOM 后绑定处理程序。

在大多数情况下，第 2 点更可取，但在某些情况下，第 1 点更好。

于 2013-01-23T16:20:26.523 回答