jQuery appending elements too many times

Question

私はショートリスト機能を作成しています。.click()に、アンカータグの属性をテーブルtbodyに追加します。

このデータはphp whileループのデータベースから表示され、現在はデータベースに3つのレコードがあります。

すべては、1つのこととは別に問題なく動作しています。データベースに記録されている時間と同じ時間が追加されています。

<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); 

    });  
});