jQuery追加元素的次数太多了

时间:2017-01-18 13:32:58

标签: jquery append

我正在创建短名单功能,在.click()上,它会将锚标记中的属性附加到表tbody中。

这个数据是在php while循环中从db显示的,我目前在db中有3条记录。

除了一件事之外,所有工作正常,它会在数据库中添加与记录相同的时间。所以例如我有3条记录,它将3次附加到

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

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

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

    });     
});         

1 个答案:

答案 0 :(得分:0)

请尝试这可能有助于你

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

    });     
});