Jquery 和引导模式 Uncaught TypeError: $.alert is not a function答案

【问题标题】：Jquery and bootstrap modal Uncaught TypeError: $.alert is not a functionJquery 和引导模式 Uncaught TypeError: $.alert is not a function
【发布时间】：2019-01-28 17:54:15
【问题描述】：

在选择文件以进行上传时，将触发下面的脚本。如果根据数据查找选择的图像文件宽度和高度不正确，则会显示警报。在使用 Bootstrap 重新构建我的网站之前，只是 Jquery 它磨损得很好。现在我已经介绍了 Bootstrap，但出现以下错误：

Uncaught TypeError: $.alert is not a function on line 24

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
elPreview = document.getElementById("preview4"),
elPreviewtext = document.getElementById("previewtext"),
useBlob   = false && window.URL;

function readImage (file) {
  // Create a new FileReader instance
  var reader = new FileReader();
  // Once a file is successfully readed:
  reader.addEventListener("load", function () {
    var image  = new Image();
      image.addEventListener("load", function () {
      // Concatenate our HTML image info
      var imageInfo = file.name;
      if ( image.width != w && image.height != h ) {
        $.alert({ ///////// LINE 24 /////////
          title: 'Image select error!',
          content: 'The image you have seleted is incorrect, ' + image.width + ' by ' + image.height + ' portrate.<br/><br/> Please resize your image to the correct size in landscape.<br/><br/>Resizing upwards reduces the quality of the image. Start with a large image and resize downwards.<br/><br/>For help read section 1.5 in the knowledgebase',
          icon: 'fa fa-rocket',
          animation: 'zoom',
          boxWidth: '50%',
          closeAnimation: 'zoom',
          buttons: {
            okay: {
              text: 'Try again',
              btnClass: 'btn-blue'
            }
          }
        });

       } else {
             var imageInfotext = 'Display width: '+ image.width  +',<br/>Display height: '+ // But get the width from our `image`
         image.height;

          // Finally append our created image and the HTML info string to our `#preview`
          elPreview.appendChild( this );
          elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');
          elPreviewtext.insertAdjacentHTML("beforeend", imageInfotext +'<br>');
              if (useBlob) {
            // Free some memory for optimal performance
            window.URL.revokeObjectURL(image.src);
          }
        }
      });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
});
reader.readAsDataURL(file);
}
// Once the user selects all the files to upload
// that will trigger a `change` event on the `#browse` input
elBrowse.addEventListener("change", function() {
var files  = this.files;
var errors = "";
if (!files) {
errors += "File upload not supported by your browser.";
}
// Check for `files` (FileList) support and if contains at least one file:
if (files && files[0]) {

// Iterate over every File object in the FileList array
for(var i=0; i<files.length; i++) {

// Refer to the current File as a `file` variable

var file = files[i];

// Test the `file.name` for a valid image extension:
// (pipe `|` delimit more image extensions)
// The regex can also be expressed like: /\.(png|jpe?g|gif)$/i
if ( (/\.(png|swf|jpg)$/i).test(file.name) ) {
// SUCCESS! It's an image!
// Send our image `file` to our `readImage` function!
readImage( file );
} else {


$('#imageis').hide();
$.alert({
title: 'Image select error!',
content: 'Unsupported Image extension, ' + file.name + '.<br/><br/> Supported file extensions are:.<br/><br/>.png for an image file<br/>.swf for a Adobe Flash file',
icon: 'fa fa-rocket',
animation: 'zoom',
boxWidth: '50%',
closeAnimation: 'zoom',

buttons: {
okay: {
text: 'Try again',
btnClass: 'btn-blue'
}
}
});

}
}
}
});

非常感谢您抽出宝贵时间。

【问题讨论】：

您使用什么 jQuery 插件来发出警报？据我所知，这既不是原生 BootStrap 也不是 jQuery。
看起来您正在使用jQuery confirm 插件 - 对吗？该插件代码的 HTML 链接有什么问题吗？（**那 会导致这样的错误...）
大家好，我的大错。我忘记包含指向我的 jquery-confirm.js 的链接。对不起，我是个笨蛋。
不是问题 - 问一个 SO 问题的很大一部分是有机会重新研究您的代码，因为您需要向其他人解释它。很多问题都是这样解决的。很高兴你能找到错误。

标签： jquery jquery-plugins bootstrap-modal

【解决方案1】：

我不熟悉名为$.alert() 的方法，所以稍后进行一些研究，我认为您的代码打算使用这种格式：

$(".close").click(function(){
   $("#myAlert").alert("close");
});

或者，也许你正在使用一个你没有提到的 jQuery 插件。

看起来您正在使用 jQuery 确认插件 - 对吗？该插件代码的 HTML 链接有什么问题吗？（那 会导致这样的错误...）

【讨论】：