javascript - jQuery Modal - 按钮操作

Question

我有一个 bootstrap 3 模态，通过父级上的按钮启动，然后使用来 self 的 MySQL 数据库的表单数据填充模态主体。填充的数据中有一个显示附件图片的小图库，以及每张图片下方的一个独特的删除按钮，用于启动查询以从特定附件文件夹中删除附件。

图库和删除按钮在模态上:

<div class=\"row\">
  <div class=\"box box-widget widget-user-2\">
    <div class=\"widget-user-header bg-gray\">

      <div class=\"lightBoxGallery\">";

  $files = scandir($log_folder);

  foreach ($files as $attachment) {
  if (in_array($attachment, array(".",".."))) continue;

  echo "
      <span class=\"input\"><button type=\"button\" id=\"DeleteAttachmentButton\" name=\"DeleteAttachmentButton\" class=\"form-btn btn-danger btn-xs\" data-filename=\"".$attachment."\"><i class=\"fa fa-trash\"></i></button><a href=\"".$log_folder.$attachment."\" title=\"".$attachment."\" data-gallery=\"\"><img src=\"".$log_folder.$attachment."\" style=\"height:100px; width:150px;\"></a></span>&nbsp;";
  }

echo "
      </div>
      <!-- ./lightbox gallery -->

现在的问题是，当我按下特定附件的删除按钮时，没有任何反应。我相信这是由下面的 JavaScript 代码引起的，该代码位于模式之后的ON THE PARENT。

// DELETE ATTACHMENT - DELETE BUTTON ON EDIT MODAL
$("#DeleteAttachmentButton").click(function(e){
    var modal = $(this);

    if (confirm('Are you sure you want to delete this attachment?')) {

        var attachment_name = $(e.relatedTarget).data('filename');  // Extract info from data-* attribute

            $.ajax({
                url: "../../plugins/MySQL/ajax_action.php",
                type: "POST",
                async: true, 
                data: { action:"delete_attachment",Holidex:$("#dataLogID").val(), LogID:$("#dataLogID").val(), Filename:attachment_name).val()}, // form data to post goes here as a json object
                dataType: "html",

                success: function(data) {
                    $('#logbook_output').html(data); 
                    drawVisualization();   
                },
                error: function(data) {
                    console.log(err);
                }
            });

            // close modal and refresh page
            $('#EditLogModal').modal('hide');
    }

});

我使用 Chrome 调试器检查是否进行了任何 AJAX 调用，但我什至没有到达 JavaScript 确认警报，也没有在控制台中收到任何错误消息。

请问有什么提示吗？

谢谢

Answer 1

您的 AJAX 调用中包含无效的 JSON 数据(您可能会在浏览器的控制台中看到错误)，

data: { action:"delete_attachment",Holidex:$("#dataLogID").val(), 
      LogID:$("#dataLogID").val(), Filename:attachment_name).val()}, // form data to post goes here as a json object
                                        //------------------^ don't use this

只需使用文件名:attachment_name}

data: { action:"delete_attachment",Holidex:$("#dataLogID").val(), 
      LogID:$("#dataLogID").val(), Filename:attachment_name)}