Javascript 使用jquery显示动态按钮

我在index.php中有以下代码：

 <tbody>
        <?php foreach($data as $fetch): ?>
            <tr>
    <input type="hidden" name="user_id" value="<?php echo $_SESSION['user_id']?>">
                <td class="segment" contenteditable="true"><?= $fetch['segment'] ?></td>
                <td class="text-center">
                    <button class = "btn btn-default action-btn" data-id="<?= $fetch['id'] ?>" data-action="update"> 
                        <span class = "glyphicon glyphicon-edit"></span> Update
                    </button> 
                    | 

                   <button class = "btn btn-success activate-btn action-btn" data-id="<?= $fetch['id'] ?>" id="<?= $fetch['id'] ?>" type="submit" data-action="activate">
                    <span class = "glyphicon glyphicon-check"></span> Activate
                </button> 

                    <button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="<?= $fetch['id'] ?>" id="<?= $fetch['id'] ?>" data-action="deactivate">
                    <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                </button>

                    <button style="display:none" class = "btn btn-danger deactivate-btn action-btn " data-id="<?= $fetch['id'] ?>"  data-action="deactivate">
                        <span class = "glyphicon glyphicon-folder-close"></span> deactivate
                    </button>
                </td>
            </tr>
        <?php endforeach; ?>

    </tbody>
</table>
     <form action="create.php" method="post" class="form-inline">
                <div class = "form-group">
                <label>Segment:</label>
                <input type  = "text" name = "segment" class = "form-control" required = "required"/>
            </div>
                <div class = "form-group">
                    <button type="submit" name = "save" class = "btn btn-primary"><span class = "glyphicon glyphicon-plus"></span> Add</button>
            </div>
            </form>
    <script type="text/javascript">
        $(".action-btn").on("click", function(e) {
            var id      = $(this).attr("data-id");
            var segment = $(this).parents("tr").find("td.segment").html();
            var action  = $(this).attr("data-action");
            $.ajax({
                "url": "action.php",
                "method": "post",
                "data": {
                    "id":      id,
                    "segment": segment,
                    "action":  action
                },
                success: function(data) {
                    alert(data);
                }
            });
        });  </script>
    $(".action-btn").click(function(){
$(this).hide();
$("#"+id).show();
});$(".deactivate-btn").click(function(){
$(this).show();
$("#"+id).show();});</script>   </body></html>

问题是当我点击任何激活按钮时，所有停用按钮都不会显示，当我刷新页面时，激活按钮会显示为我没有做任何事情，请帮助我，请更改 发件人：

致：

因为html是在文档上动态创建的

---

谢谢

首先通过控制台检查此脚本函数是否正常工作…始终尝试使用

$（document）.ready（function（）{//Do your work}）

当您在DOM中时

1）您打开了一次

标记，但关闭了两次。有点不对劲。2） 您已尝试为

操作btn

类创建两个单独的

单击事件；我很确定这不会按计划进行。你想在这里实现什么？我得到的是，当您单击Activate按钮时，它应该在运行ajax调用之前或之后转换为deactivate按钮。您可以添加$data变量的内容吗？在ajax调用之后，单击activate并执行ajax调用之后，我想显示deactivate按钮，并向您显示action.php，ajax在哪里工作@Esar ul haqasmi更改您用于显示和隐藏的不同类的类名或id，这是什么意思？cn编写代码@sunil仍然存在相同的问题，当我点击激活时，停用按钮不显示，当我刷新页面时，激活按钮显示为“无事发生”。问题是id没有定义，，，我如何定义它？实际上我在按钮标记中做了这不是正确的语法->
$（this）.attr（“数据id”）使用此属性而不是
$（this）.getAttribute（'data-id'）
（或）
document.getElementsById（“该特定id”）.getAttribute（“数据id”）
    $(".action-btn").on("click", function(e) {
        var id      = $(this).attr("data-id");
        var segment = $(this).parents("tr").find("td.segment").html();
        var action  = $(this).attr("data-action");
        $.ajax({
            "url": "action.php",
            "method": "post",
            "data": {
                "id":      id,
                "segment": segment,
                "action":  action
            },
            success: function(data) {
                alert(data);
                $(".action-btn").hide(); //this will hide your submit button
            }
        })
    });  
    //to deaactivate button

    $(".deactivate-btn").on("click", function(e) {
         $(".action-btn").show();
         $(".deactivate-btn").hide();
    });

  problem in your code is

  after ajax call jquery does not work with 
  $(".deactivate-btn").click(function(){
     $(this).show();
     $("#"+id).show();
  });
direct click

Hope you will find answer

$(".action-btn").on("click", function(e) {

$(document).on("click",".action-btn", function(e) {

    $(".action-btn").on("click", function(e) {
        var id      = $(this).attr("data-id");
        var segment = $(this).parents("tr").find("td.segment").html();
        var action  = $(this).attr("data-action");
        $.ajax({
            "url": "action.php",
            "method": "post",
            "data": {
                "id":      id,
                "segment": segment,
                "action":  action
            },
            success: function(data) {
                alert(data);
                $(".action-btn").hide(); //this will hide your submit button
            }
        })
    });  
    //to deaactivate button

    $(".deactivate-btn").on("click", function(e) {
         $(".action-btn").show();
         $(".deactivate-btn").hide();
    });

  problem in your code is

  after ajax call jquery does not work with 
  $(".deactivate-btn").click(function(){
     $(this).show();
     $("#"+id).show();
  });
direct click

Hope you will find answer