Question

为了使我的问题变得简单，我有index.php看起来像这样：

<button>A</button>
<div id="DivHolder"></div>

首先我点击按钮A（在 index.php 中）并触发事件：

$.ajax({
   url:"getButtonB.php"
})

然后在$ .ajax成功后，我得到一个按钮B（由getButtonB.php生成）并附加到 index.php 最后，在 index.php中，它看起来像这样：

<div id="DivHolder"><button class="pill YES">B</button></div>

接下来，javascript代码：

$("#DivHolder").on("click",".pill",function(){
    var thisButton=$(this);
    if(thisButton.hasClass("NO")){
        $.ajax({
              url:"doingSomethingOne.php",
              type:"POST"
        });
        thisButton.removeClass("NO");
        thisButton.addClass("YES");
    }else if(thisButton.hasClass("YES")){
         $.ajax({
              url:"doingSomethingTwo.php",
              type:"POST"
        });
        thisButton.removeClass("YES");
        thisButton.addClass("NO");
    }
});

这里的所有代码，以及我想要的这些代码是当我点击按钮A时，我得到了一个按钮B.然后我点击按钮B，它会做一些事情，比如注册营地，如果我再次点击按钮B，它将取消注册营地。所有不同的是Button B的类。如果有 YES 类，则单击取消注册。如果课程否，请点击注册。

但是这些东西不起作用，在我的实际项目中，我更改按钮B背景颜色以显示不同的状态（是或否）。因此，当我点击按钮B时，它的背景颜色会发生变化，但会改变回原点。并触发$ .ajax（），（在上面的例子中，它会触发的网址：＆＃34; doingSomethingTwo.php＆＃34; ）。在第二次点击时，不会触发其他$ .ajax（）;

最奇怪的是：

如果我从上面的脚本中删除$ .ajax（），那就说我只是更改了类（或者在我的项目中，只需更改按钮B背景颜色），然后就可以了;单击按钮B，它将变为红色，再次单击它会再次变为黄色。
如果按钮B没有动态生成，请说按钮B是 index.php 中的硬代码，在这种情况下，当然我不会使用< strong> on 绑定事件，只需使用
```
$(".pill").click(function(){
    //do something
})
```

如果有人能解决我的问题，请帮助我。提前谢谢。

Answer 1

Ajax请求是异步的，因此尝试在定义ajax请求之后立即删除或添加类将无法按预期工作。您需要的是一种了解Ajax请求是否完整的方法，如果是，则根据需要添加/删除所需的类。这是一个非常简单的例子：

var xhrOne = $.ajax({
  url:"doingSomethingOne.php",
  type:"POST"
});

xhrOne.done(function () {
  thisButton.removeClass("NO");
  thisButton.addClass("YES");
});

当我将ajax事件绑定到动态生成的内容时

1 个答案: