时间戳

首页 > 解决方案 > jquery模态表单触发两次（随机行为）

jquery - jquery模态表单触发两次（随机行为）

问题描述

我正在使用 Dropzone.js 将图像上传到我的网站。当我上传图片时一切正常。当我尝试下载图像时会出现问题。它有一个奇怪的行为，因为有时它会发生，而有些则不会。当我单击“垃圾箱”图标删除图像时，会显示一个模态表单，我可以选择是否删除图像。问题是，有时，当我选择按取消按钮删除图像时，正在删除两个图像并显示两个模态表单（一个接一个），当这种情况发生时页面被锁定。我不知道问题出在 jquery 代码中还是在 html 标记中。请您帮帮我吗？

这是html代码（php函数的一部分）：

$this->html .= "<div class='row'>";
foreach($this->rows as $this->row) {
    $this->html .= "  <div class='col-md-2 col-thumbnail'>";
    $this->html .= "    <div class='card'>";
    $this->html .= "        <img class='card-img-top' src='../" . $this->row['foto'] . "'" . "alt=''>";
    $this->html .= "         <div class='card-body'>";
    $this->html .= "            <a href='#' class='a_trash' rel='" . $this->row['id'] . "'" . ">" . "<i class='fa fa-trash fa-2x position' aria-hidden='true'></i></a>";
    $this->html .= "         </div> <!-- end card body -->";
    $this->html .= "    </div> <!-- end card -->";
    $this->html .= "   </div> <!-- end col-md-3 -->";
    }
$html .= "</div>";

相反，这是触发模态表单的 jquery 代码（引导程序 5）：

$(document).ready(function(){
  $(document).on('click','.a_trash', function(e){
  e.preventDefault();
  var id =  $(this).attr('rel');
  var thisObject = $(this).closest();
  var data_1 = 'id=' + id;
  $('#mdl-avviso').modal('show');
  $("#del").on('click', function(e){
    $.ajax({
      type: "POST",
      data: data_1,
      url: "php/del-img.php"
      })
    .done(function() {
      $('#mdl-avviso').modal('toggle');
      $(thisObject).fadeOut(300,function() {
        $(thisObject).remove();
        });
      }); // END DONE FUNCTION
    }); // END IF CONFIRM
  }); // END DOCUMENT ON CLICK
}); // END DOCUMENT READY FUNCTION

这是模态：

    <!-- MODAL START HERE -->

        <div class="modal fade" tabindex="-1" role="dialog" id="mdl-avviso">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title"><b><u>My Project</u></b></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                Would you like to delete the image, are you sure?
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="del" data-bs-dismiss="modal">Cancella</button>
                <button type="button" class="btn btn-success btn-bg-v" id="dismiss" data-bs-dismiss="modal">Annulla</button>
              </div>
            </div>
          </div>
        </div>

   <!-- MODAL END HERE -->

标签： jquerybootstrap-modalbootstrap-5

解决方案

the right code is this one:

  $(document).ready(function(){
    $('body').unbind('click').on('click', '.a_trash', function(e) {
      e.preventDefault();
      var id = $(this).closest(".a_trash").attr('rel');
      var item = $(this).parent().parent();
      $('#mdl-avviso').modal('show');
      $('#del').unbind('click').on('click', function(e){
          e.preventDefault();       
          $.ajax({
            url: 'php/del-img.php',
            type: 'post',
            dataType: 'json',
            data: {id: id},
            success: function(data) {
              $(item).fadeOut(300,function() {
                $(item).remove();
                });
            }
          });
      });
    });
  });

推荐阅读