Question

我正在处理一个项目，在那里我从输入标签获取一个值，然后在div中插入输入值，并在屏幕上附加子元素。

而我想要的是当用户点击子元素时，父div将被移除，为此我使用了一个函数。当我默认使用一个部分时，这是有效的，但是当我添加一个部分，然后点击那个用户点击它之类的函数调用的子节点时，父节将被移除但我的功能不工作。

＆＃13;

$('#btn').click(function() {
  var menuFieldName = $('#text').val();
  $('.div').append('<div class="a">' + menuFieldName + '<span>X</span></div>');
  $('#text').val('');
});

$('.div .a span').on('click', function() {
  $(this).parent().remove();
});

＆＃13;

.a {
  display: inline-block;
  padding: 5px 35px 5px 10px;
  position: relative;
  background: #eee;
  border-radius: 20px;
  margin: 10px;
}

.a span {
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  color: #fff;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="a">Test <span>X</span></div>
</div>

<input type="text" id="text">
<button id="btn">Add</button>

＆＃13;

https://jsfiddle.net/jafaruddeen/rag71ma0/

Answer 1

您正在动态追加元素，但您没有将任何事件处理程序附加到新添加的元素。要解决此问题，您可以使用事件委派，您可以将事件附加到.div <{1}}，如$('.div').on('click', '.a span', function() {

$('#btn').click(function() {
  var menuFieldName = $('#text').val();
  $('.div').append('<div class="a">' + menuFieldName + '<span>X</span></div>');
  $('#text').val('');
});

$('.div').on('click', '.a span', function() {
  $(this).parent().remove();
});

.a {
  display: inline-block;
  padding: 5px 35px 5px 10px;
  position: relative;
  background: #eee;
  border-radius: 20px;
  margin: 10px;
}

.a span {
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  color: #fff;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="div">
  <div class="a">Test <span>X</span></div>
</div>

<input type="text" id="text">
<button id="btn">Add</button>

Answer 2

您无法删除它的原因是因为当您注册事件时，您尝试注册它的元素尚不存在。

您需要使用event delegation

$('body').on('click', '#my-element', function(){...});

Answer 3

你必须在追加后调用点击功能..或全局调用点击功能（body元素）并匹配跨度..

<p>
  <asp:RangeValidator runat="server" ID="RangeValidator1" ControlToValidate="IPAQ_Q2_Days" MinimumValue="1" MaximumValue="7" Type="Double" Text="The value must be from 1 to 7" Font-Size="Large" ForeColor="Red" />
</p>
<asp:Label ID="IPAQ_Q2_Days_Label" AssociatedControlID="IPAQ_Q2_Days" ForeColor="White" Font-Size="11" Font-Weight="Normal" Text="Please indicate the number of days you performed vigorous activities at work." runat="server">
  <asp:TextBox ID="IPAQ_Q2_Days" runat="server" class="form-control" placeholder="___ days per week" Width="200" value="0"></asp:TextBox>
</asp:Label>

检查你的小提琴。修复它 - ＆gt; https://jsfiddle.net/jafaruddeen/rag71ma0/

无法移除父div

3 个答案: