기초 체크 박스가 jQuery와 함께 작동하지 않습니다

Question

여기 http://passion4web.co.uk/DigiPics/upload으로 이동하여 사진을 업로드하면 밝기를 조정하는 몇 가지 확인란 옵션이 나타납니다. 등 내가 여러 번 사용할 수 있도록 #photo-template 복제 jquery 사용하고 있지만 문제는 내가 클릭 할 때 변경되지 않습니다 확인란입니다.

이것은 자바 스크립트를 사용하여 페이지에 기초 체크 박스를 추가 할 때만 발생하는 것으로 보입니다. 당신은 제대로 label의 for 속성을 사용하지 않는

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

: 여기에 추가 내 방법입니다. 당신의 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);