jQuery가 요소를 너무 많이 추가했습니다.

Question

나는 shortlisting 기능을 만들고 있습니다. .click()에 앵커 태그의 속성을 테이블 tbody에 추가합니다.

이 데이터는 PHP에서 루프를 표시하는 데 사용되며 현재 데이터베이스에 3 개의 레코드가 있습니다.

모두가 잘 작동하고 있습니다. 한 가지만 제외하면 데이터베이스에있는 레코드와 동일한 시간이 추가됩니다.

<a href="#"class="add_to_shortlist" cadidate_email="<?php echo $cadidate_email; ?>" candidate_phone="<?php echo $cadidate_phone; ?>" candidate_name="<?php echo $cadidate_name; ?>" candid="<?php echo $cv_id; ?>" candidate_cv="candidate_database/<?php echo $cv_link; ?>" >Add to shortlist</a 

jQuery를 : 나는 3 개 기록이 그래서 예를 들면, 그것은

HTML로 3 회를 추가하는 것

$(document).ready(function(){ 
    $('.add_to_shortlist').click(function(){ 

     var candidate_id = $(this).attr('candid'); 
     var candidate_name = $(this).attr("candidate_name"); 
     var cadidate_email = $(this).attr("cadidate_email");  
     var candidate_phone = $(this).attr("candidate_phone"); 
     var candidate_cv = $(this).attr("candidate_cv");  


     var newRowContent = "<tr><td>" + candidate_id +" </td><td>" + candidate_name + "</td><td>" + cadidate_email + "</td><td>" + candidate_phone + "</td><td><a target='_blank' href="+ candidate_cv +">View</a></td><td><a href='#' class='delete_shortlisted_row'>remove</a></td></tr>"; 

     $("#shortlist_table tbody").append(newRowContent); 

    });  
});   

Answer 1

이 시도하시기 바랍니다 그것은 당신에게

HTML

도움이 될 수 있습니다

<a href="#" class="add_to_shortlist" cadidate_email="<?php echo $cadidate_email; ?>" candidate_phone="<?php echo $cadidate_phone; ?>" candidate_name="<?php echo $cadidate_name; ?>" candid="<?php echo $cv_id; ?>" candidate_cv="candidate_database/<?php echo $cv_link; ?>" >Add to shortlist</a> 
<table class="table table-condensed"> 
                <thead> 
                 <tr> 
                  <th>Candidate Id</th> 
                  <th>Candidate Name</th> 
                  <th>Candidate Email</th> 
                  <th>Candidate Phone</th> 
                  <th>Candidate CV</th> 

                 </tr> 
                </thead> 
                <tbody id="cand"> 
                </tbody> 

JQUERY

$(document).ready(function(){ 
    $('.add_to_shortlist').click(function(){ 

     var candidate_id = $(this).attr('candid'); 
     var candidate_name = $(this).attr("candidate_name"); 
     var cadidate_email = $(this).attr("cadidate_email");  
     var candidate_phone = $(this).attr("candidate_phone"); 
     var candidate_cv = $(this).attr("candidate_cv");  


     var newRowContent = "<tr><td>" + candidate_id +" </td><td>" + candidate_name + "</td><td>" + cadidate_email + "</td><td>" + candidate_phone + "</td><td><a target='_blank' href="+ candidate_cv +">View</a></td><td><a href='#' class='delete_shortlisted_row'>remove</a></td></tr>"; 

     $("#cand").append(newRowContent); 

    });  
});