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永远不会被替换。