Question

我在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>

并且在行动中.php我有这个代码

<?php require_once 'class.php';require './session.php';if (!isset($_POST['action'])) {  exit;}$action = $_POST['action'];$segment =$_POST['segment'];$id = $_POST['id'];$change='update';switch($action) {
case "update":

    $conn = new db_class();
    $conn->update($segment, $id,$change);

    exit;
case "activate":
    $activation = '1';

     $conn = new db_class();
    $conn->activate($activation, $id);

    exit;
case "deactivate":
    $activation = '0';
    $userID= $_SESSION['user_id'];
     $conn = new db_class();
    $conn->activate($activation, $id);

    exit;}?>

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

Answer 1

请改变从：

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

要：

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

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

由于

Answer 2

首先通过控制台检查此脚本功能是否有效...在DOM中时始终尝试使用$(document).ready(function(){ // Do your work });

Answer 3

    $(".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

使用jquery显示动态按钮

3 个答案: