jQuery Modal-按钮动作

Question

I have a bootstrap 3 modal that is launched via a button on the parent and then populate the modal-body with form data coming from my MySQL database. Among the populated data is small gallery showing attachment pictures and one unique delete-button underneath each picture to launch a query to delete the attachment from a specific attachment folder.

Gallery and delete button ON THE MODAL:

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

The problem now is that nothing happens when I press the delete button for the specific attachment. I believe this to be caused by the JavaScript code below which is located ON THE PARENT right after the modal.

// 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');
    }

});

I checked with Chrome Debugger to see whether any AJAX call is made, but I do not even get to the JavaScript Confirm Alert nor do I receive any error message in the console.

Any hints please?

Thanks

Answer 1

change this

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

to this

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

Read about event-delegation