Question

我有一个bootstrap 3模式，通过父项上的按钮启动，然后使用来自我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 Confirm Alert，也没有在控制台中收到任何错误消息。

有任何提示吗？

由于

Answer 1

更改此

$("#DeleteAttachmentButton").click(function(e){

到这个

$(document).on("click","#DeleteAttachmentButton",function(e){

了解event-delegation

Answer 2

您的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

只需使用Filename:attachment_name}

即可

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

Answer 3

$(document).on('click', '#DeleteAttachmentButton', 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');
    }

});

jQuery模态 - 按钮操作

3 个答案: