Anchor exécute différentes fonctions auxquelles il est assigné - jquery

Pour une raison quelconque, un href avec la classe RemoveSpell après un clic sur s'exécute à nouveau sur a.AddSpell. Vous pouvez tester le problème ici http://89.69.172.125/cms2.0/

$(document).ready(function(){
championNumber = 1;
$("a#AddChampion").on("click",function(){

$("div#ChampionInput").append(
"<div class="Champion">
<a href="#" class="Remove">Remove</a>
<br>
<input type="text" class="ChampionInput" name="champion[]" placeholder="Champion "+championNumber+"">
<a href="#" class="AddSpell">Add Spell</a>
<br>
<div>");
championNumber++;
});
$("div#ChampionInput").on("click", "a.Remove",function(){
$(this).parent("div.Champion").remove();

});
$("div#ChampionInput").on("click", "a.AddSpell",function(){
$(this).append(
"<div class="Spell">
<br>
<input type="text">
<a href="#" class="RemoveSpell">Remove Spell</a>
</div>
");
});
$("div#ChampionInput").on("click", "a.RemoveSpell",function(){

});
});

Réponses:

Vous ne devez pas ajouter le sort de suppression en tant qu'enfant de addSpell élément, besoin de l'insérer après cela

$(document).ready(function() {
championNumber = 1;
$("a#AddChampion").on("click", function() {

$("div#ChampionInput").append(
"<div class="Champion">
<a href="#" class="Remove">Remove</a>
<br>
<input type="text" class="ChampionInput" name="champion[]" placeholder="Champion " + championNumber + "">
<a href="#" class="AddSpell">Add Spell</a>
<br>
<div>");
championNumber++;
});
$("div#ChampionInput").on("click", "a.Remove", function() {
$(this).parent("div.Champion").remove();

});
$("div#ChampionInput").on("click", "a.AddSpell", function() {
$(this).after(
"<div class="Spell">
<br>
<input type="text">
<a href="#" class="RemoveSpell">Remove Spell</a>
</div>
");
});
$("div#ChampionInput").on("click", "a.RemoveSpell", function() {
$(this).closest(".Spell").remove();
});
});

* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
margin: 0 auto;
width: 100%;
max-width: 900px;
}
input {
border: 1px solid #999;
}
.ChampionInput {
margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="AddChampion">Add Champion</a>
<form name="second_form" id="second_form" method="POST">
<div id="ChampionInput">
</div>
<br>
<br>
<input type="submit" name="submit">
</form>

Plusieurs problèmes Une imbrication HTML non valide et ne reconnaissant pas que des événements qui se produisent sur un descendant d'un élément déclenchera également des gestionnaires d'événements sur le parent.

Les événements se propagent dans l'arborescence DOM. Alors quand tu fais ton nid removeSpell à l'intérieur addSpell et cliquez removeSpell l'événement sera également déclencher sur addSpell

C’est en fait comment vous déléguez des événements en utilisant on(). Vous assignez le gestionnaire d'événements à div#ChampionInput qui est en haut de l'arbre DOM de ces deux éléments. Cette délégation s'appuie sur la propagation d'événement ou "bouillonnement" à partir des cibles

Vous ne pouvez pas avoir <a> en tant que descendant de <a>.