Question

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

此代码在我的页面上添加了一个叠加层，然后在其中添加了下一个和上一个按钮的容器。

然后，使用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)); 
});

});

现在，当我按下类.step2的按钮时，添加follownig代码向控制台发送消息：

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

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

这是一个显示我的问题的jsfiddle： https://jsfiddle.net/dkzjpnbo/3/

（显然我无法使用jsfiddle加载文件，但是如果你检查这些元素，你会看到第二次你按下NEXT（它有类step2它应该发送一个警告，但它什么都不做）

Answer 1

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

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

您的代码无法处理动态添加的内容。如果您更改类，添加该类或类似的新标记，它将无法正常工作。即便如此，您也可以使用$("#next")选择器，因为您使用了ID，而ID应该始终是唯一的。

解决方案是在包装容器上添加带有on方法的even，就像这样。例如，在开头添加div <div id='wrapper'></div>并使用jQuery向其添加内容。

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

将事件附加到使用jQuery

1 个答案: