jQuery在div中附加一个类不起作用[重复]答案

【问题标题】：jQuery append a class in a div does not work [duplicate]jQuery在div中附加一个类不起作用[重复]
【发布时间】：2018-04-29 13:00:50
【问题描述】：

我使用.append() 在 div 中添加了一个类，但是当我单击该类 (.again) 时，什么也没有发生（当我单击 你好吗？ 很好！ 应该显示）。你有什么想法吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="src">
  <p class="feedback">Welcome !</p>
</div>

<script>
$('.feedback').click( function() {
  $('.feedback').html( 'Thank You ! Do not click here ;) click on How are you below');
  $('#src').append('<p class="again">How are you ?</p>');
});

$('.again').click( function() {
  $('.again').html( 'Fine !');
});

</script>

【问题讨论】：

标签： jquery class append

【解决方案1】：

它不起作用，因为您在使用该类创建元素之前“再次”附加了该类的事件点击。

$('.again') 返回在那一刻文档中具有该类的所有元素。

为了满足您的需要，您应该在创建元素后将事件附加到类上。像这样的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="src">
  <p class="feedback">Welcome !</p>
</div>

<script>
$('.feedback').click( function() {
  $('.feedback').html( 'Thank You ! Do not click here ;) click on How are you below');
  $('#src').append('<p class="again">How are you ?</p>');

  $('.again').click( function() {
    $('.again').html( 'Fine !');
   });
});

</script>

【讨论】：

【解决方案2】：

您添加了一个未绑定旧处理功能的新元素。

 $('.feedback').click( function() {
  $('.feedback').html( 'Thank You ! Do not click here ;) click on How are you below');
  $('#src').append('<p class="again">How are you ?</p>').click( function(){  $('.again').html( 'Fine !')});;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="src">
  <p class="feedback">Welcome !</p>
</div>

【讨论】：