时间戳

首页 > 解决方案 > 使用新添加的类触发函数

javascript - 使用新添加的类触发函数

问题描述

我试图简化它，简单到足以让我的问题更清楚。即使在 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>

标签： javascriptjquery

解决方案

这种行为是因为您在 DOM 加载后将类应用到元素，换句话说，是动态的。因此，附加到“.second”控件的事件侦听器不知道新添加的类，并且在单击该控件时不会触发。

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

正如 George Bailey 所说，您可以参考这里以获得深入的解释。

关于您的特定代码，解决方法是简单地调整它：

$(".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>

推荐阅读