Question

我已经尝试简化它，使其变得更简单。即使在执行addClass之后，也没有弹出“我是男孩”警报。这是我的代码：

$(".first").click(function () {
              var a = $(this).html();
              if (a=='On') {
                   $(this).removeClass('first').unbind().addClass('second');
                  $(this).html('Off');
              }
        });

        $(".second").click(function () {
         alert('I am a boy');
      });

<button class="first">On</button>

Answer 1

您传递给$.post的函数要到以后才运行（回调）。因此，您尝试选择该类后即添加了该类。在回调函数中执行此操作，方法与添加类相同（无需选择该类，只需使用$this）

Answer 2

此行为是因为在DOM加载后（即动态地）将类应用于元素。因此，连接到“ .second”控件的事件侦听器无法识别新添加的类，并且在单击该控件时也不会触发。

要解决此问题，只需将事件侦听器应用于父DOM对象，通常是$（document）或$（'body'），即可确保它知道具有动态添加类的所有子对象。

正如乔治·贝利（George Bailey）所说，您可以参考here进行深入的解释。

关于您的特定代码，解决方法是将其调整为：

$(".first").click(function () {
  var a = $(this).html();
  if (a=='On') {
    $(this).removeClass('first').unbind().addClass('second');
    $(this).html('Off');
  }
});
    
/* Changed this:
$(".second").click(function () {
         alert('I am a boy');
      });
*/

// To this:
$(document).on('click', '.second', function () {
  console.log('I am a boy');
});

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

使用新添加的类触发函数

2 个答案: