-1

为了让我的问题简单，我有 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，它将注销营地。所有不同的是按钮 B 的类。如果有类YES，则单击取消注册。如果有班级NO，则点击注册。

但是这些东西不起作用，在我的实际项目中，我更改了按钮 B 背景颜色以显示不同的状态（是或否）。因此，当我单击按钮 B 时，它的背景颜色已更改，但右更改为原始颜色。并触发 $.ajax()，（在上述情况下，它触发url:"doingSomethingTwo.php"）。在第二次点击时，它不会触发另一个 $.ajax();

最奇怪的是：

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

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

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

然后，一切都很好。它会同时改变背景颜色并相应地触发 $.ajax。

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

4

1 回答 1

0

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

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

xhrOne.done(function () {
  thisButton.removeClass("NO");
  thisButton.addClass("YES");
});
于 2013-02-26T16:24:53.717 回答