Question

HTML：

<div class="testSpanDiv"></div>

的javascript：

  $(document).ready(function () {
      $('.testSpanDiv').append('<span id="testSpan">Hello</span>');
  }

  $('#testSpan').on('click', function(){
      $(this).parent().remove();
  });

在动态添加单击span元素时，事件未触发。如果将span元素静态添加到html，则会触发事件。你能否提出任何建议。

我也在尝试下面，但没有工作。

  $('#testSpan').on('click', '.testSpanDiv', function(){
      $(this).parent().remove();
  });

Answer 1

你需要像这样使用：

 $('.testSpanDiv').on('click', '#testSpan', function(){
  // ^^ parent div             ^^ element in which you want to bind the function
      $(this).parent().remove();
 });

Answer 2

你的语法错误试试这种方式

$(document).ready(function () {
      $('.testSpanDiv').append('<span id="testSpan">Hello</span>');


   $('#testSpan').on('click', function(){
      $(this).parent().remove();
  });
  });

https://jsfiddle.net/7x8jbLpt/

Answer 3

您可以从body

委派活动

另请注意，代码中存在一些语法错误

 $(document).ready(function () {
      $('.testSpanDiv').append('<span id="testSpan">Hello</span>');
  })

  $('body').on('click', '#testSpan', function(){
      alert("Hello")
  });

JSFIDDLE

如何为动态添加的span元素分配click事件？

3 个答案: