Jquery addClass -- 新类的函数

Question

我的 js 文件有问题。 这是我的 Js 代码。

<script type="text/javascript">
 $(document).ready(function()
   {

    $(".abc").click(function()
    {
     $(this).addClass('testingClass');
    });
    $(".testingClass").click(function()
    {
      alert("hiiiiiiiiiiiiiiiiii")

    });
  });
</script>

我的 HTML：

<button class="abc">Demo</button>

当我在浏览器中加载此页面时，addClass 函数正在成功执行并添加名为“testingClass”的新类。

但是当尝试再次单击该按钮（meens : class="testingClass"）时，警报功能不起作用。错误是什么。

JS 不支持元素的频繁执行吗？ 任何人请帮助我。

步骤..

1. 一个按钮的类名为 abc
2. 点击它时，ajax 函数会将当前时间存储在数据库中。（ajax 函数不在堆栈代码中）。
3. 成功的 ajax 响应后，按钮类更改为 testingClass。
4. 现在按钮的类名是 testingClass
5. 一段时间后再次单击按钮（类名为：testingClass），我想调用当前单击时间的 ajax 函数并将值存储在数据库中。
6. 然后 Button 类名将更改为 old (abc)。

Answer 1

动态添加元素需要event delegation

$(document).on("click",".testingClass",function()
 {
   alert("hiiiiiiiiiiiiiiiiii")

 });

Event delegation

Answer 2

更新

对于更改后的问题，您正在寻找类似的内容。 这是demo。

$('body').on('click', '.abc', function () {
    // event attached to .abc
    // updateTime is a method that takes context (this), current timestamp and a function
    // we need to send the context so that we have access to the current 
       element inside the below function which is executed outside the scope
    updateTime.call(this, new Date().getTime(), function (data) {
        $(this).addClass('testingClass').removeClass('abc');
        $('#log').append('Time: ' + data + 'from abc <br/>');
    });
}).on('click', '.testingClass', function () {
    // event attached to .abc
    updateTime.call(this, new Date().getTime(), function (data) {
        $(this).addClass('abc').removeClass('testingClass');
        $('#log').append('Time: ' + data + ' from testingclass <br/>');
    });
});

function updateTime(currentTime, successCallback) {
    $.ajax({
        context: this, // the context sent from the above methods is used here
        url: '/echo/html/',
        data: {
            html: currentTime
        },
        method: 'post',
        success: successCallback
    });
}

---

使用.one() 将帮助您在多次点击时仅附加一次事件。

每个事件类型的每个元素最多执行一次此处理程序。

我认为这就是您要寻找的。添加类后添加处理程序。

$(".abc").click(function(){
    $(this).addClass('testingClass');
    $(".testingClass").one('click', function() {
      alert("hiiiiiiiiiiiiiiiiii");
    });
  });

$(document).ready(function() {

  $(".abc").click(function() {
    $(this).addClass('testingClass');
    $(".testingClass").one('click', function() {
      alert("hiiiiiiiiiiiiiiiiii");
    });
  });

});

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