Javascript在引导模式下不起作用

Question

我一直在努力解决有趣的错误。 我的Javascript代码无法在引导模式下工作。

我正在使用"Dropzone.js"文件上传系统。 问题就在那里：它加载dropzone.js，但不加载我的自定义js，更改dropzone.js输入字段位于许多模式之一。

我试过是否将输入字段放在非模态的任何其他位置，它会加载我的自定义脚本，但是当它处于模态时，它不会加载。

添加脚本：

<link href="../Style/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../Style/vendors/dropzone/dist/min/dropzone.min.css" rel="stylesheet">

<script src="../Style/vendors/pnotify/dist/pnotify.nonblock.js"></script>
<script src="../Style/vendors/dropzone/dist/min/dropzone.min.js"></script>

<script>
    $('#image_upload_panel').on('shown', function() {
    Dropzone.options.uploadWidget = {
    autoProcessQueue: false,
    maxFilesize: 10,
    maxFiles: 1,
    addRemoveLinks: true,
    dictResponseError: 'Server not Configured',
    acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
    init:function(){
      var self = this;
      // config
      self.options.addRemoveLinks = true;
      self.options.dictRemoveFile = "Delete";
      //New file added
      self.on("addedfile", function (file) {
        console.log('new file added ', file);
      });
      // Send file starts
      self.on("sending", function (file) {
        console.log('upload started', file);
        $('.meter').show();
      });

      // File upload Progress
      self.on("totaluploadprogress", function (progress) {
        console.log("progress ", progress);
        $('.roller').width(progress + '%');
      });

      self.on("queuecomplete", function (progress) {
        $('.meter').delay(999).slideUp(999);
      });

      // On removing file
      self.on("removedfile", function (file) {
        console.log(file);
      });
    }
    };
  });
</script>

打开模式按钮：

<a id="post_upload" class="post_upload" style="float:right; margin-top:-20px;" href="#" data-toggle="modal" data-target=".image_upload"><button type="submit" name="btn-upload" id="btn-upload" class="btn btn-danger ">Upload Image</button></a>

和模式：

<!-- Image Upload -->
<div class="modal fade image_upload" id="image_upload_panel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="dropzone" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="uploadWidget">
                <b><center><div class="modal-header">Upload Post</div></center></b>
                <center><input type="text" name="title" style="margin-top:20px; width:60%; height:35px; text-align:center;" placeholder="Here goes title!" /></center>
                <hr>
                <div class="dz-message" data-dz-message><span>Drop or select your file!</span></div>
                <div class="modal-footer"><button type="submit" id="uploadPostForm" name="uploadPostForm" class="btn btn-primary ">Upload</button></div>
            </form>
        </div>
    </div>
</div>
<!-- END OF Image Upload -->

Answer 1

我等不及您对我的问题的回答，问这是否是bootstrap 4 。 我要在几分钟后离开，希望这能解决您的问题。 如果没有，请告诉我，我会解决的。 参见代码中的注释，但是我可以正常工作，并且正在应用本地配置：

$(document).ready(function(){

    // The bootstrap 4 modal event is "shown.bs.modal", not just "shown"
    $(document).on('shown.bs.modal', '#image_upload_panel', function() {

        // I am using the jQuery method of creating the dropzone.
        // Using #uploadWidget here would not work for me. 
        $("#image_upload_panel").dropzone({
            url: '/kookoopapa'
        });
    });

    // I'm automating the opening of the modal on page load,
    // then selecting a file. A 404 page not found error verifies
    // that the local config is being applied to the dropzone.
    $('#image_upload_panel').modal();

});