Ajax:用onclick jQuery连续刷新div

Question

我一直在尝试在单击按钮后刷新div内容，但只发生了一次，需要刷新页面才能再次单击按钮以刷新内容。我是AJAX新手，请帮我解决这个问题。

以下是我的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>

这是我的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

您正在清除li元素中的所有元素，并将它们替换为新元素。你的老听众不见了。您将不得不重新附加侦听器或使用委托。例如，更改以下内容：

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

为此：

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

这个假设.personal-info-wrapper永远不会被取代。