Question

我有问题，我不明白为什么......

在页面中，用户可以添加和删除技能......

过程是：

当用户添加技能时，ajax发送请求到我的视图，我的视图在数据库中添加此技能。当我成功获得ajax请求时，我加载包含用户所有技能的div：

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

所以我不会加载所有页面，只是加载包含技能的div。加载完成后，该技能将显示在页面上。

当用户想要删除技能时，它与添加相同的过程：数据库从数据库中删除技能，并且ajax请求加载包含用户所有技能的div。在此加载之后，该技能不会显示在页面上。

问题是用户在不重新加载所有网页的情况下添加，删除和添加相同的技能！

对于最后一次添加，ajax函数没有被调用！

我认为问题与DOM有关，但为什么？`

这是我的代码的一个片段（我发布最重要的因为代码非常长）：

我的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 %}

和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;
    });
});

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

0 个答案: