목록 항목과 JQuery와

내가 여기에이 코드를 가지고 : 기본적으로 codepen link 목록 항목과 JQuery와

, 목록 항목이 반응해야하는 방법을 (표시 확인란을 가진 사람) 추가 된 새로운 항목이 이미 배치 목록처럼해야한다는 것입니다 항목 (클릭하면 배경이 변경되는 항목). 카운트도 올라야합니다. 내 현재의 방법이 작동하지 않는 이유는 다른 코드가 같은 방식으로 쓰여으로 나는 ... 모른다

CODE :

HTML :

<div class='navbar navbar-fixed-bottom'> 
      <div class='col-lg-3 col-offset-2 pull-left'> 
       <form class="navbar-form pull-left"> 
        <div class="input-group"> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 
         <input type="text" class="form-control" name="filtr" id="filtr" placeholder="Search.."> 
        </div> 
       </form> 
      </div> 
      <div class='container'> 
       <a class='navbar-brand' href='#'></a> 
       <ul class='nav navbar-nav pull-right'> 
        <li><a href='#' class='count'><strong>0</strong></a></li> 
        <li><a href='#'><i class="glyphicon glyphicon-align-justify"></i></a></li> 
        <li><a href='#'>Next Step <i class="glyphicon glyphicon-chevron-right v-align-middle"></i></a></li> 
       </ul> 
      </div> 
     </div> 
     <div class='contains'> 
      <ul class='list-unstyled' id="productlist"> 
       <label for="addbox"><li class="products" id="addbox">+ NON-STOCKED ITEM</li></label> 
       <label for="nonitem"><li class='products NON-STOCKED0'>NON-STOCKED ITEM<input class="hide" type="checkbox" id="nonitem" value="NON-STOCKED ITEM"><span class='selectedbox pull-right large-icon'><i class="glyphicon glyphicon-ok"></i></span></li></label> 
        <span id='newbox'></span> 
      </ul> 
    </div>

JQuery와 :

여기

$(function(){ 
       var count = 0; 
       var newdiv = $("#newbox"); 
       var nonitem = $("#nonitem") 
       var a = $(nonitem).size() + 1; 
       var b = $(nonitem).size() + 1; 

       a = a -1; 
       b = b -1; 

       $("#addbox").click(function(){ 
        $("<label for='nonitem"+a+"' id='chk'><li class='products NON-STOCKED'>NON-STOCKED ITEM<input class='' type='checkbox' id='nonitem"+b+"' value='NON-STOCKED ITEM'></li></label>").appendTo(newdiv); 
        a++; 
        b++; 
        return false; 
       }); 

       $("input[type='checkbox']").click(function(){ 
        $(this).parent().toggleClass("backchange"); 
        $(this).next(".selectedbox").fadeToggle(); 
        var check = this.checked? 1 : -1; 
        count = count + check; 
        $(".count").text(count); 
        if(count >= 1){ 
         $(".clearall").fadeIn(); 
         $(".count").addClass("countplus"); 
        }else{ 
         $(".clearall").fadeOut(); 
         $(".count").removeClass("countplus"); 
        } 
       }); 
      });

출처

2013-07-30 Albzi

관련 코드를 게시하십시오. – Tdelang

@Tdelang을 완료했지만 코드 팸도있었습니다. – Albzi

나중에 가서 : http://codepen.io/anon/pen/Ilpqk

문제가 있다는 JQuery와 .click()은 문서가로드 될 때만 적용되므로 삽입 된 요소에 새 클래스가 적용되지 않습니다. 대신 .on()을 사용하십시오.

그래서 짧은에, 나는 당신은 당신의 입력 체크 박스에 hide 클래스를 추가해야합니다 $(document).on("click","input[type='checkbox']",function(){

출처

2013-07-30 09:56:27 jdepypere

대단히 감사합니다! 나는 이것을 몇 분 후에 대답으로 표시 할 것이다. 편집 - 완료. – Albzi

에 $("input[type='checkbox']").click(function(){을 변경했습니다. 확인란을 숨 깁니다.

또한 이벤트 바인딩은 이미 존재하는 요소에 대한 것이므로 동적으로 추가 된 목록에는 적용되지 않습니다.

변화

$("input[type='checkbox']").click(function(){ 
// your code 
});

$('.list-unstyled').on('click', 'input[type="checkbox"], function(){ 
// your code 
});

이 아동의 선택에 클릭을 감시하는 부모 요소에 이벤트를 위임합니다.

출처

2013-07-30 09:58:40

체크 박스의 숨김을 취소하여 내가 의미하는 목록 항목이 작동하지 않는다는 것을 알았습니다. 그래도 감사합니다! 돕기 위해 Upvoted! – Albzi

목록 항목과 JQuery와

답변

관련 문제