Jquery and bootstrap modal Uncaught TypeError: $.alert is not a function

Question

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

未捕获类型错误：$.alert 不是第 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'
}
}
});

}
}
}
});

非常感谢您的宝贵时间。

Answer 1

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

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

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

您似乎在使用 jQuery 确认插件 - 对吗？该插件代码的 HTML link 有什么变化吗？ (那个会导致这样的错误...)

Jquery and bootstrap modal Uncaught TypeError: $.alert is not a function

Jquery and bootstrap modal Uncaught TypeError: $.alert is not a function

jquery

jquery-plugins

bootstrap-modal