Javascript Ajax：使用onclick jQuery连续刷新div

我一直在尝试刷新按钮点击后的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;
});

$（“#提交人”）。单击（功能（e）{
e、 预防默认值（）；
js#u personal_title=$（“#js#u personal_title”）.val（）；
js#u personal_desc=$（“#js#u 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({
类型：“POST”，
url:“”，
数据：datastr，
成功：职能（e）{
//e、 预防默认值（）；
$（“.personal info wrapper”）.load（location.href+“#personal info contents”）；
}
});
}else{alert（'请输入说明'）；}
}else{alert（'请输入标题'）；}
返回false；
});

您正在清除

li

元素中的所有元素，并用新元素替换它们。你的老听众不见了。您必须重新连接侦听器或使用委派。例如，更改此选项：

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

为此：

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

---

这假设

.personal info wrapper

永远不会被替换。

您是否检查了Ajax响应。成功回调调用了吗？是的，它工作了，当我第二次尝试时，只有它被阻塞了。您是否分配了$（“#提交人”）。单击（关于Document Ready event？是的，它围绕着它，我只是跳过了它。在第二次单击时查看浏览器控制台窗口中的Javascript错误。很酷，这解决了我的许多问题，非常感谢。