javascript - Foundation 复选框停止与 jQuery 配合使用

Question

如果你去这里http://passion4web.co.uk/DigiPics/upload上传一张照片，你会看到它弹出一些复选框选项来增亮、扭曲。我正在使用 jquery 克隆 #photo-template 这样我就可以多次使用它，但我遇到的问题是单击时复选框不会改变。

这似乎只有当我使用 javascript 将基础复选框添加到页面时才会发生。这是我添加它们的方法:

    var $template = $("#photo-template");
    var $addedPhotos = $("#added-photos"); 
    $addedPhotos.html("");

    if(response.length > 0)
    {
        for(var i in response)
        {
            var options = response[i];
            var template = $template.clone();

            template.find(".photo").attr("src", options['Photo URL']);
            template.find(".brighten").prop("checked", options['Brighten']);
            template.find(".sky").prop("checked", options['Sky']);
            template.find(".grass").prop("checked", options['Grass']);
            template.find(".distortion").prop("checked", options['Distortion']);
            template.find(".description").val(options['Description']);

            $addedPhotos.append(template.html());
        }
    }

Answer 1

您没有正确使用label 的for 属性。 HTML 的摘录如下:

<div class="switch round">
    <input type="checkbox" class="sky" name="sky">
    <label for="sky"></label>
</div>

for 的值需要与复选框的 id 匹配。应该是:

<div class="switch round">
    <input type="checkbox" class="sky" name="sky" id="sky">
    <label for="sky"></label>
</div>

不幸的是，由于您要克隆它，因此您还需要使这些 id 具有唯一性。一种可能的解决方案:

template.find(".sky")
        .prop("checked", options['Sky'])
        .prop("id", "sky" + i)
        .next() //get the label after it
        .prop("for", "sky" + i);