Якорь выполняет различную функцию, назначенную

Question

По какой-то причине href с классом RemoveSpell после нажатия выполняется снова на a.AddSpell. Вы можете проверить эту проблему здесь 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(){ 

    }); 
}); 

Answer 1

Вы не должны добавить удалить заклинание, как дитя addSpell элемента, необходимо вставить его после этого

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

 
    $('div#ChampionInput').append(
 
     '<div class="Champion">\ 
 
\t \t \t <a href="#" class="Remove">Remove</a>\ 
 
\t \t \t <br>\ 
 
\t \t \t <input type="text" class="ChampionInput" name="champion[]" placeholder="Champion ' + championNumber + '">\ 
 
\t \t \t <a href="#" class="AddSpell">Add Spell</a>\ 
 
\t \t \t <br>\ 
 
\t \t <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">\ 
 
\t \t \t <br>\ 
 
\t \t \t <input type="text">\ 
 
\t \t \t <a href="#" class="RemoveSpell">Remove Spell</a>\ 
 
\t \t </div>\ 
 
\t \t '); 
 
    }); 
 
    $('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>

Answer 2

Несколько проблем , Недопустимое вложение html и не распознавание того, что события, происходящие на потомке элемента, также инициируют обработчики событий в родительском элементе.

События распространяются по дереву DOM. Так что, когда вы гнездо removeSpell внутри addSpell и нажмите removeSpell событие будет также вызвать на addSpell

Это на самом деле, как вы делегирование события с помощью on(). Вы назначаете обработчик события div#ChampionInput, который находится в дереве DOM из обоих этих элементов. Эта делегация полагается на распространение событий или «барботирование» от целей

Вы не можете иметь <a> в качестве потомка <a>.