Javascript 将事件附加到使用jQuery插入的按钮时出现问题

我有以下代码，可以在页面上动态创建环境。最终目标是为用户创建一个“漫游向导”

这段代码在我的页面上添加了一个覆盖层，然后是一个包含“下一步”和“上一步”按钮的容器

然后，使用Ajax为每个步骤填充容器（由Next/Prev按钮触发）

为了实现一些独特的样式并对每个步骤应用独特的函数，我向容器和每个步骤的按钮添加了一个类。例如，第一步，容器具有类step1，按钮也是如此，第二步将类step2应用于容器和按钮，依此类推

我发现，基于使用jQuery更改的类，我无法将函数应用于按钮

例如，下面是我创建环境、为每个步骤调用文件并添加所有类的代码：

jQuery(function ($) {
  $('body').attr('onboarding_step', 'step1');
  $('body.wp-customizer').addClass('skizzar_onboarding');
  $('<div id="so_overlay"></div>').insertBefore('body.wp-customizer');

// first step
  $('#so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
  $('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="prev" class="step1"><i class="fa fa-chevron-left"></i> PREV</button><button id="next" class="step1">NEXT <i class="fa fa-chevron-right"></i></button></div>');

// here's the steps
var steps = [
  "wp-content/plugins/skizzar-onboarding/ajax/step1.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step2.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step3.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step4.php",
  "wp-content/plugins/skizzar-onboarding/ajax/step5.php",
];
counter = 0;
$('.onboarding_steps').load(steps[counter]);

$('#next').click(function () {
  counter = (counter + 1) % steps.length; 
  $('.onboarding_steps').load(steps[counter]); 
  $('#onboarding_steps_container, .button_holder button, #so_overlay').attr('class', 'step' + (counter + 1)); 
  $('body').attr('onboarding_step', 'step' + (counter + 1)); 
});

$('#prev').click(function () {
  counter = (counter - 1) % steps.length; 
  $('.onboarding_steps').load(steps[counter]); 
  $('#onboarding_steps_container, .button_holder button, #so_overlay').attr('class', 'step' + (counter + 1)); 
  $('body').attr('onboarding_step', 'step' + (counter + 1)); 
});

});

什么也没发生。我想这是因为我正在通过jQuery更改类，但是，我不知道如何解决这个问题

下面是一个JSFIDLE，显示了我的问题：

---

（显然，我不能使用JSFIDLE加载文件，但是如果您检查元素，您将看到第二次按NEXT（它有类step2，它应该发送警报，但它什么也不做）

这是因为当您添加这样的事件时

$('.step2 #next').click(function () {
    console.log('step 2 pressed');
});

您的代码无法处理动态添加的内容。如果您更改类、为该类添加新标记或类似的内容，则不会起作用。即使如此，您也可以简单地使用

$（“#next”）

选择器，因为您使用的是id，并且id应始终是唯一的

解决方案是在包装器容器上添加even with

on

方法，如下所示

$('#wrapper').on("click", ".step2 #next", function () {
    console.log('step 2 pressed');
});

---

这并不能解决问题。使用（on（）本身无法处理动态内容。您拥有的两个代码段在逻辑上是相同的。@Rorymcrossan是正确的，请参阅我更新的小提琴-仍然不工作，即使更改为on，这可能会有所帮助：-$（'.step2'）。on（“单击“，”#下一步”，函数（）{console.log（'step 2 pressed'）；}）；在父元素后调用click id。@RoryMcCrossan，你是对的，忘记了中间的参数。更新了我的答案。我对完全使用jQuery生成的网页使用了类似的方法，这很有效。（按现在的情况，而不是以前的情况）。您需要使用委托事件处理程序。有关详细信息，请参阅我标记为“重复”的问题。@Rorymcrossan-我明白了。我已根据该问题添加了我认为正确的内容，但现在，无论动态类是$（document），每次我按下按钮，它都会在控制台中返回一些内容。on（'click'，'.step2#next'，function（）{console.log（'step2 pressed'）；}）；实际上，请忘记，我更改了选择器，它似乎可以工作。但是，现在，当类更改为step2时，它会在控制台中显示消息，而不是当我单击按钮时

$('#wrapper').on("click", ".step2 #next", function () {
    console.log('step 2 pressed');
});