jQuery Modal - 按钮动作答案

【问题标题】：jQuery Modal - button actionjQuery Modal - 按钮动作
【发布时间】：2017-03-22 05:47:09
【问题描述】：

我有一个 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 确认警报，也没有在控制台中收到任何错误消息。

有什么提示吗？

谢谢

【问题讨论】：

DeleteAttachmentButton 按钮的click 事件是否触发？
没有。它应该向我显示 JS 警报，但我没有收到任何警报。 Chrome 也不会在调试器中注册任何事件

标签： javascript jquery ajax twitter-bootstrap

【解决方案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

只需使用Filename:attachment_name}

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

【讨论】：

是的，这为我解决了这个问题，我知道它必须是小东西；）我想知道为什么它没有出现在我的 Chrome 控制台中？

【解决方案2】：

改一下

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

到这里

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

了解event-delegation

【讨论】：

为此点赞。没有解决问题，因为它与 AJAX 数据语句中的类型有关，但事件委托肯定是正确的方法。
如果元素不是动态添加的，则不需要委托。根据我的经验，PHP 将在页面加载时添加元素（在这种情况下）。

【解决方案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');
    }

});

【讨论】：