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

为了简化我的问题，我将index.php设置为：

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

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

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

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

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

这就是这里所有的代码，我想要这些代码是，当我点击按钮A时，我得到一个按钮B。然后我点击按钮B，它会做一些事情，比如说注册一个营地，如果我再次点击按钮B，它会注销营地。所有不同之处在于按钮B的类。如果有类是，则单击以取消注册。如果有类否，则单击注册

但这些都不起作用，在我的实际项目中，我更改按钮B的背景色以显示不同的状态（是或否）。因此，当我单击按钮B时，它的背景颜色被更改，但右键更改回原始图像。并触发$.ajax（），（在上面的例子中，它触发url:“doingSomethingTwo.php”）。在第二次单击时，它不会触发另一个$.ajax（）

最奇怪的是：

如果我从上面的脚本中删除$.ajax（），也就是说我只需更改类（或者在我的项目中，只需更改按钮B的背景色），那么它就可以工作；点击按钮B，它变为红色，再次点击它又变回黄色

如果按钮B不是动态生成的，假设按钮B是index.php中的硬代码，在这种情况下，我当然不会使用on绑定事件，只使用

$(".pill").click(function(){
    //do something
})

那么，一切都好了。它将同时更改背景颜色并相应地激发$.ajax

---

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

Ajax请求是异步的，因此在定义Ajax请求后立即删除或添加类将无法正常工作。您需要的是一种知道Ajax请求是否完成的方法，如果是，则根据需要添加/删除所需的类。下面是一个非常简单的例子：

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

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

---

这能解决你的问题吗？如果是，请确保将此答案标记为正确答案。否则，请描述什么不起作用。谢谢。@istos。谢谢您的快速回复。你的回答很有启发性。我确实犯了错误。我使用$（“#DivHolder”）.ajaxComplete（）加载按钮B。因此，也许下次我单击按钮B并触发另一个$.ajax（）时，.ajaxComplete（）也将被触发，因此，#DivHolder中的内容将更改回原始内容。这当然可以解释为什么背景颜色会变回原来的状态；顺便说一下，你的解决方案在我的情况下似乎不起作用。无论如何，谢谢你。