2016-10-26 2 views
0

while 루프에서 Reply 버튼을 클릭하면 활성화되는 양식이 있습니다. 이것은 간단하지만 while 루프에서 할 수 있으며 고유 한 ID가 필요합니다. 내 코드로 지금까지 작동하지만 첫 번째 결과에만 작동합니다. 다른 결과를 클릭해도 아무 일도 일어나지 않습니다. 이미 고유 ID를 할당했지만 작동하지 않습니다.jQuery on while 루프에서 숨겨진 요소가 사라집니다.

jQuery를 부분 : : 내 코드는 아래와 같습니다

$(document).ready(function() { 
    $("#reply").on('click', 'a.click', function() { 
     var rowid = $(this).attr("data-rowid"); 
     $(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800), 
     $(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']"); 
    }); 
}); 

PHP의 HTML 부분 :

<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?> 
    <div id="reply"><a href="javascript:;" data-rowid="<?php echo $cmt_id?>" class="click show-reply-box">Reply</a></div> 
    <div class="reply-comment-holder" data-rowid="<?php echo $cmt_id?>" style="display:none;"> 
       <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="cmt_form_id_<?php echo $cmt_id?>"> 
       <input type="hidden" name="status_id" value="<?php echo $cmt_id; ?>" id="cmtsid_<?php echo $cmt_id?>" /> 
       <textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_<?php echo $cmt_id?>"></textarea> 
       </form> 
      </div> 
<?php } ?> 

가 jQuery를/Ajax를 도와주세요.

+0

응답 링크가 여러 개인 경우 ID가 고유해야하므로 회신 ID 대신 응답 클래스를 사용해야합니다. – Chris

+0

http://jsbin.com/jupadozine/edit?html,js,output – Chris

+0

감사합니다. Chris .. 얼마나 바보 같은 .. .. 지금 일하고 있어요. –

답변

1

HTML

<div class="reply"><a href="javascript:;" data-rowid="1" class="click show-reply-box">Reply</a></div> 
<div class="reply-comment-holder" data-rowid="1" style="display:none;"> 
      <form method="post" action="#" class="full-width cmtform" id="cmt_form_id_1"> 
      <input type="hidden" name="status_id" value="1" id="cmtsid_1" /> 
      <textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_1"></textarea> 
      </form> 
     </div> 
<div class="reply"><a href="javascript:;" data-rowid="2" class="click show-reply-box">Reply</a></div> 
<div class="reply-comment-holder" data-rowid="2" style="display:none;"> 
      <form method="post" action="#" class="full-width cmtform" id="cmt_form_id_2"> 
      <input type="hidden" name="status_id" value="2" id="cmtsid_2" /> 
      <textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_2"></textarea> 
      </form> 
     </div> 

자바 스크립트는

$(document).ready(function() { 
    $(".reply").on('click', 'a.click', function() { 
     var rowid = $(this).attr("data-rowid"); 
     $(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800), 
     $(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']"); 
    }); 
}); 

jsbin 위 의견에 나열됩니다.