Question

由于某些原因，再次点击a.AddSpell上的一个带有类RemoveSpell的href。您可以在此处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元素的子元素添加，需要在此之后插入

＆＃13;

$(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();
  });
});

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

几个问题。无效的html嵌套并且无法识别元素后代上发生的事件也会触发父级的事件处理程序。

事件在DOM树中传播。因此，当您将removeSpell嵌套在addSpell内并点击removeSpell时，该事件也会在addSpell上触发

事实上，这是您使用on()委派活动的方式。您正在将事件处理程序分配给div#ChampionInput，它是这两个元素的DOM树。该代表团依赖于事件传播或＆＃34;冒泡＆＃34;从目标

您不能<a>作为<a>的后代。

Anchor执行分配给它的不同功能

2 个答案: