javascript - 与我的实时网站集成时，隐藏和显示 div 的 JQuery 代码不起作用

Question

我不确定我在这里做错了什么。在这里和 JSFiddle 上工作正常，但是当我尝试将代码集成到我的 WooCommerce 网站时，它什么也没做。

我的代码相当简单，它只是检查图像的尺寸并根据检查结果显示/隐藏带有适当消息的 div。

Here is the live site.

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() {
  var file, img;

  if ((file = this.files[0])) {
    img = new Image();

    img.onload = function() {
      if (this.width < 1800 && this.height < 1800) {
        $('.pass').css('display', 'none');
		$('.fail').css('display', 'block');
      }
      
      else {
        $('.pass').css('display', 'block');
		$('.fail').css('display', 'none');
      }
    };
    img.src = _URL.createObjectURL(file);
  }
});

.pass {
  display: none;
}

.fail {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="filecheck" />
<div class="pass">
image quality good
</div>

<div class="fail">
image quality too low
</div>

任何人都可以看到我在这里做错了什么吗？这可能是非常基础的东西，但我对此还很陌生。

Answer 1

看起来您可能在对象存在于 DOM 之前就附加了处理程序。如果我在页面加载后将您的脚本注入(inject)页面(即将其复制并粘贴到 JavaScript 控制台)，那么它似乎可以正常工作。

您可以尝试的三件事:

您可以先尝试将监听器附加到 document，它始终存在，然后使用 #filecheck 选择器:

$(document).on('change', '#filecheck', function () {
     // Your code here
});

这在性能方面可能不是最好的，但可以解决问题。

您还可以尝试将代码包装在 ready() 处理程序中:

$(document).ready(function() {
    // Your event handler code
});

您也可以尝试将文件处理脚本移动到文档正文的末尾，看看是否可行。