jQuery를 기능 그래서이 레이아웃이 매 초마다

Question

에만 작동합니다

여기

<div class="sidebar"> 
    <div class="tabs"> 
     <div class="comments"> 
     <a href="#" class="c_button">Comments</a> 
     </div> 
     <div class="todo"> 
     <a href="#" class="t_button">To Do list/notes</a> 
     </div> 
     <div class="content"> 
     <div class="comments_cnt"> 
      Comments 
      <form> 
       <input type="text" value="write" id="post"> 
      </form> 
      <br /> 
      <a href="javascript:void(0)" onclick="post()">Post it</a> <br /> 
     </div> 
     <div class="todo_cnt"> 
      To do 
     </div> 
     </div> 
    </div> 
</div> 

은 JQuery와 : 나중에 해결 나는이 표시 될 수있는 게시물을 추가 할 수 있도록

<script> 
    $(document).ready(function() { 
     $(".c_button").click(function() { 
      { 
       $(".todo_cnt").css("opacity", "0"); 
      } { 
       $(".comments_cnt").css("opacity", "1"); 
      } { 
       $(".comments").css("border-bottom", "0px") 
      } { 
       $(".todo").css("border-bottom", "1px solid black") 
      } 
     }) 
     $(".t_button").click(function() { 
      { 
       $(".todo_cnt").css("opacity", "1"); 
      } { 
       $(".comments_cnt").css("opacity", "0"); 
      } { 
       $(".comments").css("border-bottom", "1px solid black"); 
      } { 
       $(".todo").css("border-bottom", "0px") 
      } 
     }) 
    }) 
</script> 
<script> 
    function post() { 
     var post = $("#post").val(); { 
      $('.comments_cnt').append('<div class="post_unrslvd">' + post + '<p><a href="#" class="resolve_button">Mark as resolved.</a></p></div>'); 
     } { 
      $("#post").val(''); 
     } 
     $('.resolve_button').click(function() { 
      $(this).parents(".post_unrslvd").toggleClass('post_rslvd'); 
     }); 
    }; 
</script> 

및 . 문제는 toggleClass 함수가 모든 두 번째 게시물에만 작동하며 이유를 이해할 수 없다는 것입니다.

Answer 1

문제는 ... 당신이 요소에 중복 된 이벤트 처리기를 추가하는 것입니다

function post() { 
    var post = $("#post").val(); 
    $('.comments_cnt').append('<div class="post_unrslvd">' + post + '<p><a href="#" class="resolve_button">Mark as resolved.</a></p></div>'); 
    $("#post").val(''); 
}; 

//dom ready handler 
jQuery(function ($) { 
    //delegated event handler 
    $('.comments_cnt').on('click', '.resolve_button', function() { 
     $(this).closest(".post_unrslvd").toggleClass('post_rslvd'); 
    }) 
}) 

데모 : 그래서 resolve_button 토글 1 개 클릭 핸들러는 첫 번째 호출에 Fiddle

있다 잘 작동하지만 ... post이 두 번째로 호출되면 첫 번째 호출에서 추가 된 resolve_button 버튼에 다른 클릭 핸들러가 생깁니다 (이제 2 개의 핸들러가 있음) ... 토글이 두 번 호출되므로 효과.

데모 : Problem - 다음을 클릭 할 수있는 해결 버튼을 기다리고 있습니다, 그것은 당신의 스크립트를 호출 할 포스트 기능을 기다리고

Answer 2

라는지고 얼마나 많은 시간을 확인하기 위해 콘솔 봐.

$("document").ready(function(){$('.resolve_button').click(function() { 
    $(this).parents(".post_unrslvd").toggleClass('post_rslvd'); 
}); 
}); 

트릭 정말