Django-Ajax：许多相同的load（）

I have a problem and I don't understand why...

In a page, the user can add and delete skills...

The process is :

1. When the user add a skill, ajax send request to my view, my view add this skill in database. When I am in success of the ajax request, I load the div containing all skills of the user :

   $('#div_containing_skills').load(document.URL);

So I don't load all page but just the div containing skills. After this load, the skill is show on the page.

2. When the user want delete a skill, it's the same process like the addition : The database delete the skill from database, and the ajax request load the div containing all skills of the user. After this load, the skill is NOT show on the page.

The problem is when the user add, delete and add the same skill without reload the all page !

For the last add, the ajax function isn't called !

I think the problem is related to the DOM but why ?`

Here is a fragment of my code (I just post the most important because the code is very long) :

My HTML :

<div id="addSkill" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title"> Add skills </h4>
        </div>
        <div id="addSkill_body" class="modal-body">
            <form id="formAdd_skills" method="POST">
                {% csrf_token %}
                <div class="container-fluid">   
                    <div class="row">
                        <div class="col-md-6">
                            {{ formAddSkills.skills|bootstrap }}
                        </div>                      
                        <div id="detailsskills" class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    <span> currents skills </span> 
                                </div>
                            </div>                                  
                        </div>
                    </div>                                                  
                    <input id="confirmAddSkill" type="submit" class="btn" value="Add" >
                </div>
            </form>
        </div>  
    </div>

</div>
</div>

<div id="myskills">
    {% for skill in user.sub.skills.all %}

    <div id="supprSkill_{{skill|cut:" "}}" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form onsubmit="submitFormsupprSkill(this,'{{skill}}');return false;" name="formSupprMySkill" method="POST">
                    {% csrf_token %}
                    {% load bootstrap %}
                    <div class="form-group">
                        <label> Do you really want to delete this skill {{skill}} ? </label>
                        {{ form_deleteskill|bootstrap }}
                    </div>
                    <input name="confirmSupprSkill" id="confirmSupprSkill" type="submit" value="Confirm">
                </form>
            </div>  
        </div>
    </div>
</div>


<div id="skill_{{skill|cut:" "}}" name="myskill"> 
    <div class='panel panel-warning'> 
        <div class='panel-heading'>
            <button name="suppr_myskill" data-toggle="modal" data-target="#suppr_myskill_{{skill|cut:" "}}" type="button" class="close">&times;</button>
            {{ skill }}
        </div>
        <div name="details_skill" id="details_skill_{{skill}}"class='panel-body'>
            {% if skill.details %}
                <p> {{ skill.details }} </p>
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}

AND THE JS :

function add_skill(){   
    var detailskills = document.getElementsByName("detailsskills");
    var skill = document.getElementById("skill");


    var btn_submit = $("#confirmSkills");

    var data = {
          "detailskills": detailskills,
          "skill" : skill,
          "name_btn" : btn_submit.attr("value"),
        };

$.ajax({
  'type' : 'POST',
  'dataType' : 'json',
  'url' : "/the_url",
  'data': data,

  success: function(json) {
    $('#addSkill_body').modal('toggle');
    $('#myskills').load(document.URL +  ' #myskills');     
    $('#formAdd_skills').load(document.URL +  ' #formAdd_skills');
    },
  error:function(data){
    alert("Error");
    }
});           
return false;

}

$(document).ready(function() {
    $("#formAdd_skills").submit(function(evt) {
        evt.preventDefault();
        add_skill();
       return false;
    });
});