addClass（）中的类无法使用ajax工作

Question

我有这段代码

$('.button').click(function(){
    $('.ic84').addClass("deletexxx");
});
$('.deletexxx').click(function(){
    $('body').hide();
});

<button class="button">Test number 1</button>
<button class="ic84">Test number 2</button>

为什么在我点击.button后点击.ic84 .deletexxx的事件处理程序不起作用。谁能告诉我为什么会这样？

Answer 1

$('.button').click(function() {
  $('.ic84').addClass("deletexxx");
});
$(document).on('click','.deletexxx',function() {
  alert('Hide body')
  $('body').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="button">Test number 1</button>
<button class="ic84">Test number 2</button>

对页面加载时不存在的元素使用.on()（传递相关的选择器参数字符串）

Answer 2

您附加点击事件的方式对于您的具体情况不正确。

jQuery('.myclass').click(function(e){});

将使用类＆＃34; .myClass＆＃34;搜索当前DOM中的所有元素。然后将点击附加到它。在你的情况下，这不起作用，因为在你试图附加这个事件时，没有给定类的元素......所以没有附加事件。

此解决方案是事件委派

jQuery('body').on('click', '.myclass', function(e){});

它的作用是向主体（或任何其他html元素）添加一个事件监听器，它将监听具有类.myclass的元素的任何单击。 （这与你点击＆＃34; span＆＃34;元素的方式相同，它包含在＆＃34; a＆＃34;元素中..这仍然会触发＆＃34;一个＆＃34）

所以在你的例子中：

$(document).on('click','.deletexxx',function() {
      alert('this works');
  });

是否是正确的触发方式。