无法使用 jquery 多次更改 html 内容答案

【问题标题】：cannot change html content multiple times with jquery无法使用 jquery 多次更改 html 内容
【发布时间】：2021-11-14 18:44:24
【问题描述】：

这段代码的想法是，当点击一个按钮时，它应该将按钮从 for ex drop 更改为 Enroll。

这是包含 jQuery 的代码：

$(document).ready(function() {
    $(document).on('click','.dropJQ',function () {
         var classIdValue =  this.value;
         var toEnrollBtn = "#" + classIdValue +"ToEnrollButton";
         var toEmpty = "#" + classIdValue +"ToEmpty";
         
         
      $.get("rmov.php", {classID : classIdValue},
      function(response){
          var opeartion = "success";
          if(response == opeartion){
              alert("The drop operation was failed");
          }else{
              alert("The drop operation was successful!"); 
         }
    $(toEnrollBtn).html("<button class = 'enrollJQ'  value = "+classIdValue+" >Enroll</button>");  
      $(toEmpty).html("");      
      
});
    });
    
    }); 
    
    </script>
      <script>
  
$(document).ready(function() {
   $(document).on('click','.enrollJQ',function () {
        var classIdValue =  this.value;
        var toEnrolledString = "#" +classIdValue + "ToEnrolledString";
         var toDropBtn = "#" + classIdValue + "ToDropBtn";
     $.get("rsv.php", {classID : classIdValue},
      function(response){
           var opeartion = "success";
          if(response == opeartion){
              alert("The enroll operation was failed");
          }else{
              alert("The enroll operation was successful!"); 
         }   
         $(toEnrolledString).html("Enrolled");
          $(toDropBtn).html("<button class ='dropJQ' value = '"+classIdValue+"' >Drop</button>");
        });
    });
});

这是触发发生的代码子集：

while($row= mysqli_fetch_assoc($result)) {
               //echo '<tr><td><a href="InformationPage.php?classID='.$row['id'].'">'.$row['name'].''.'</a> </td>';
                echo '<tr id="trenrolld">';
                echo '<td><a href="InformationPage.php?classID='.$row['id'].'">'.$row['name'].''.'</a> </td>';
                echo '<td id="'.$row['id'].'ToEnrollButton">Enrolled</td>';//<a href="drop.php?classID='.$row['id'].'">Drop</a>
                echo '<td id="'.$row['id'].'ToEmpty"><button class = "dropJQ" value = "'.$row['id'].'" >Drop</button></td>';
               echo '</tr>';
                     }

单击按钮后，按钮会从 for ex 更改。注册 -> 放弃，但是当我再次点击时，按钮保持“放弃”

【问题讨论】：

我完全不明白你想对你的问题做什么。请澄清并使用 JS 创建 html 版本，以便在 codepen 或 Jsfiddle 中进行测试。
@Tadas 那里有很多选项.. 一个是注册，当你点击它时，它会变成'放弃'按钮，这样你就可以放弃你的注册了.. 所以当我点击一个注册按钮它变成了下拉按钮，但是当我再次单击它时，按钮保持“下拉”按钮
你能像用 PHP 一样用 HTML 语言制作这个按钮吗？然后我可以复制 HTML 和你的 JQuery 代码，看看它是如何工作的。
检查您的开发工具控制台是否有错误。

标签： php html jquery ajax

【解决方案1】：

您可以检查click按钮的文本，然后更改它。

例子：

<button>Enrolled</button>

$("button").click(function(){
    $(this).text($(this).text() == 'Enrolled' ? 'Drop' : 'Enrolled');
});

【讨论】：