Ajax：使用onclick jQuery连续刷新div

Question

I have been trying refresh the div contents after button click but it happen only one time and need to refresh the page to click the button again to refresh the content. I'm new to AJAX, please help me to solve this issue.

Here is my HTML:

<li id="personal-info" class="personal-info-wrapper">
    <div class="profile_content" id="personal-info-contents"> 
      **more codes to follow....**
      **at last**
    <tr class="pro-info-set">
        <td class="info-group-left">
            <input class="form-control" type="text" id="js_personal_title" name="js_personal_title">
        </td>
        <td class="info-group form-inline">
            <input class="form-control" type="text" id="js_personal_desc" name="js_personal_desc">
            <input id="submit_person" class="form-control" type="button" value="Add">
            <label id="submit_person_msg" value="Add"></label>
        </td>                                       
    </tr>
       <?php }  ?>
</table>

Here is my JS

$("#submit_person").click(function(e){
    e.preventDefault();
    js_personal_title = $("#js_personal_title").val();
    js_personal_desc= $("#js_personal_desc").val();
    if (js_personal_title !== null && js_personal_title !== "") {
        if (js_personal_desc !== null && js_personal_desc !== "") {
            var datastr = 'js_personal_title='+js_personal_title + '&js_personal_desc='+js_personal_desc; 
            $.ajax({
                type: "POST",
                url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
                data: datastr,
                success:function(e) {
                    //e.preventDefault();
                    $(".personal-info-wrapper").load(location.href  + " #personal-info-contents");
                }
            });
        } else { alert('Please enter the decription');}
    } else { alert('Please enter the title');}
return false;
});

Answer 1

You are clearing out all the elements inside the li element and replacing them with new ones. Your old listeners are gone. You'll have to reattach the listeners or use delegation. For example, change this:

 $("#submit_person").click(function(e){

For this:

 $('.personal-info-wrapper').on('click','#submit_person', function(e) {

This assuming .personal-info-wrapper never gets replaced.