当我单击按钮时，JQuery 不会响应

Posted 2023-05-08

技术标签:

【中文标题】当我单击按钮时，JQuery 不会响应【英文标题】：JQuery won't respond when I click button 【发布时间】：2019-05-04 23:22:07 【问题描述】：

我有这个 php jQuery 文件上传系统.... 文件夹列表完全生成成功，但在点击预期时不会创建新文件夹或删除。下面是 PHP 和 jQuery 代码。

jQuery (index.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>List From Directory</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
  <br />
  <br />
  <div class="container">
    <h2 align="center">List Folders From Directory</a></h2>
    <br />
    <div align="right">
      <button type="button" name="create_folder" id="create_folder" class="btn btn-success">Create</button>
    </div>
    <div id="folder_table" class="table-responsive">

    </div>
  </div>
</body>
</html>
<div id="folderModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><span id="change_title">Create Folder</span></h4>
      </div>
      <div class="modal-body">
        <p>Enter Folder name
        <input type="text" name="folder_name" id="folder_name" class="form-control" /> </p>
        <br />
        <input type="hidden" name="action" id="action" />
        <input type="hidden" name="old_name" id="old_name" />
        <input type="button" name="folder_button" id="folder_button" class="btn btn-info" value="Create" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function()
  load_folder_list();

  function load_folder_list()
  
    var action = "fetch";
    $.ajax(
      url : "action.php",
      method:"POST",
      data:action:action,
      success:function(data)
      
        $('#folder_table').html(data);
      
    )
  
  $(document).on('click', '#create_folder', function()
    $('#action').val('create');
    $('#folder_name').val('');
    $('#folder_button').val('Create');
    $('#old_name').val('');
    $('#change_title').text('create Folder');
    $('#folderModal').modal('show');
  );


  $(documnet).on('click', '#folder_button', function()
    var folder_name = $('#folder_name').val();
    var action = $('#action').val();
    var old_name = $('#old_name').val();
    if(folder_name != '')
    
      $.ajax(
        url : "action.php",
        method:"POST",
        data:folder_name:folder_name,old_name:old_name, action:action,
        success:function(data)
        
          $('#folderModal').modal('hide');
          load_folder_list();
          alert(data);
        
      );
    
    else
    
      alert("Enter Folder Name");
    
  );
  $(document).on('click', '.update', function()
    var folder_name = $(this).data("name");
    $('#old_name').val(foldername);
    $('#folder_name').val(folder_name);
    $('#action').val("change");
    $('#folder_button').val('Update');
    $('#change_title').text("Change Folder Name");
    $('#folderModal').modal("show");
  );
);
</script>

action.php 文件虽然系统没有完成，但完成了视频中所做的一切，但它不会只是创建或发出错误通知。

<?php
//action.php
if(isset($_POST["action"]))

  if($_POST["action"] =="fetch")
  
    $folder = array_filter(glob('*'), 'is_dir');
    $output = '
    <table class="table table-bordered table-striped">
      <tr>
        <th>MPO Number</th>
        <th>No. of Attachment</th>
        <th>Update</th>
        <th>Delete</th>
        <th>Upload File</th>
        <th>View Uploaded File</th>
      </tr>
    ';

    if(count($folder) > 0)
    
      foreach($folder as $name)
      
        $output .= '
          <tr>
            <td>'.$name.'</td>
            <td>'.(count(scandir($name)) - 2).'</td>
            <td><button type="button" name="update" data-name="'.$name.'" class="update btn btn-warning btn-xs">Update</button></td>
            <td><button type="button" name="delete" data-name="'.$name.'" class="delete btn btn-danger btn-xs">Delete</button></td>
            <td><button type="button" name="upload" data-name="'.$name.'" class="upload btn btn-info btn-xs">Upload File</button></td>
          <td><button type="button" name="view-files" data-name="'.$name.'" class="view_files btn btn-default btn-xs">View Files</button></td>
          </tr>
        ';
        
    
    else
    
      $output .= '
      <tr>
      <td colspan="6">No Folder Found</td>
      </tr>
      ';
    
    $output .='</table>';
    echo $output;

  
  if($_POST["action"] == "create")
  
    if(!file_exists($_POST["folder_name"]))
    
      mkdir($_POST["folder_name"], 0777, true);
      echo 'Folder Create';
    
    else
    
      echo 'Folder Already Created';
    
  
  if($_POST["action"] =="change")
  
    if(!file_exists($_POST["folder_name"]))
    
      rename($_POST["old_name"], $_POST["folder_name"]);
      echo 'Folder Name Change';
    
    else
    
      echo 'Folder Already Cready Created';
    
  

?>

【问题讨论】：

首先，检查控制台是否有错误。其次，您的 HTML 无效。您已在 html 之外放置了 div 和 script 元素我也看到了一个语法错误：$(documnet) 不存在； document 是正确的元素。谢谢...语法错误更正立即解决了我的问题。谢谢...语法错误更正立即解决了我的问题。 【参考方案1】：

一旦所有的东西都清理干净，修正了一些错别字：$(documnet) & $('#old_name').val(foldername);（应该是folder_name），我已经为你的代码创建了这个sn-p。除了 AJAX 元素外，它似乎可以整体工作。我可以单击“创建”按钮并查看新对话框。

$(function() 
  function load_folder_list() 
    var action = "fetch";
    $.ajax(
      url: "action.php",
      method: "POST",
      data: 
        action: action
      ,
      success: function(data) 
        $('#folder_table').html(data);
      
    );
  

  $(document).on('click', '#create_folder', function() 
    $('#action').val('create');
    $('#folder_name').val('');
    $('#folder_button').val('Create');
    $('#old_name').val('');
    $('#change_title').text('create Folder');
    $('#folderModal').modal('show');
  );

  $(document).on('click', '#folder_button', function() 
    var folder_name = $('#folder_name').val();
    var action = $('#action').val();
    var old_name = $('#old_name').val();
    if (folder_name != '') 
      $.ajax(
        url: "action.php",
        method: "POST",
        data: 
          folder_name: folder_name,
          old_name: old_name,
          action: action
        ,
        success: function(data) 
          $('#folderModal').modal('hide');
          load_folder_list();
          alert(data);
        
      );
     else 
      alert("Enter Folder Name");
    
  );

  $(document).on('click', '.update', function() 
    var folder_name = $(this).data("name");
    $('#old_name').val(folder_name);
    $('#folder_name').val(folder_name);
    $('#action').val("change");
    $('#folder_button').val('Update');
    $('#change_title').text("Change Folder Name");
    $('#folderModal').modal("show");
  );

  load_folder_list();
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<br />
<br />
<div class="container">
  <h2 align="center">List Folders From Directory</a>
  </h2>
  <br />
  <div align="right">
    <button type="button" name="create_folder" id="create_folder" class="btn btn-success">Create</button>
  </div>
  <div id="folder_table" class="table-responsive">
  </div>
</div>
<div id="folderModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><span id="change_title">Create Folder</span></h4>
      </div>
      <div class="modal-body">
        <p>Enter Folder name
          <input type="text" name="folder_name" id="folder_name" class="form-control" /> </p>
        <br />
        <input type="hidden" name="action" id="action" />
        <input type="hidden" name="old_name" id="old_name" />
        <input type="button" name="folder_button" id="folder_button" class="btn btn-info" value="Create" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

希望对您有所帮助。

【讨论】：

以上是关于当我单击按钮时，JQuery 不会响应的主要内容，如果未能解决你的问题，请参考以下文章

使用 Javascript/Jquery 停止 html 声音

当我单击具有相同类的列表中的按钮时，在顶部元素中添加类 - Jquery

单击按钮时防止jquery ui打开第二个对话框

JQuery getJson 成功函数在按钮单击时触发

按钮单击时 JQuery 中的 ConfirmDialog() 自动关闭

使用jQuery单击时保持图像悬停按钮