Question

我使用上面的函数添加段落（它工作正常）。我想使用此事件来删除某些内容，但它根本不会运行。谢谢！

function add() {
  text = $('.textfield').val();
  $('.list').append('<p class="target">' + text + '</p>');
  $('.textfield').val('');
}

$('.target').click(function(){
        $(this).remove();
});

Answer 1

将点击分配放在添加功能中：

function add() {
  text = $('.textfield').val();
  $('.list').append('<p class="target">' + text + '</p>');
  $('.textfield').val('');
  $('.target').click(function(){
        $(this).remove();
  });
}

Answer 2

由于您在Jquery中注册了一个click事件，请确保在

中添加事件

$（document）.ready（function（）{ ...... //活动在这里...... }）;

$( document ).ready(function() {
    $('.target').click(function(){
        $(this).remove();
     });
});

Answer 3

你有点动态添加的元素错误。以这种方式创建元素时，它们不会继承您的侦听器。相反，在文档级别添加侦听器，但使用on（“click”，＆lt; selector＆gt;，＆lt; function＆gt;）中的选择器 - 这样，文档本身就会监听，而不关心如何选中的元素已创建。

我在.list div中添加了两个带有该类的元素，它们的处理方式与之后添加的元素完全相同。通过在包含元素处添加侦听器，我们避免了动态元素问题。在某种程度上，这是有意义的 - 您无法监听不存在的元素上的事件，如果您在连接了侦听器之后创建它们，则新元素无法了解它们有意听众。

请注意，侦听器不必附加到文档中，您可以像我一样轻松地将它附加到包含这些动态元素的.list div。

详细了解 here 。

$(".addText").on("click", add);

function add() {
  text = $('.textfield').val();
  $('.list').append('<p class="target">' + text + '</p>');
  $('.textfield').val('');
}

$(".list").on("click", '.target', function() {
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="textfield">
<button class="addText">Add</button>
<div class="list">
<p class="target">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>

<p class="target">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p></div>

功能无法运行

3 个答案: