无法使用load()来处理img

时间:2016-06-03 13:00:46

标签: javascript jquery

在开始之前我知道这可能是重复的。我查看了以下解决方案:

jQuery .load() not working on my image

并更改了我的代码。但是我仍然无法解决负担。我已经尝试将.load更改为.on('load' ...),并且基本上我的代码试图让这个工作正常...我仍然无法让alert()解雇..任何想法?

<html>
   <head>
   <title>XXX</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="outter">
         <div id="selectionBox">
                <form id="qqqq" enctype="multipart/form-data" action="/" method="post">
<input id="fileSelect" onchange="readURL(this);" type="file" name="imagePP" accept="image/x-png, image/gif, image/jpeg, image/bmp">
             </form>
         </div>
      </div>
   </body>
   <script>  
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    if (!$("#aaa").length)
                        $("body").append("<img id=\"aaa\">");

                    $("#aaa").attr('src', e.target.result);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        $(document).ready(function() {
            $("#aaa").load(function() {
                alert("sdffds");
            }).each(function() {
                if (this.complete) {
                    $(this).trigger('load');
                }
            });
        });
   </script>
</html>

2 个答案:

答案 0 :(得分:1)

尝试

$(document).on("load", "#aaa", function() {

load事件绑定到#aaa的方法 这样,动态添加的#aaa元素仍会将事件绑定到它们。

编辑: https://jsfiddle.net/4b8340gu/ 请查看此jsFiddle,对代码进行细微更改,使其正常工作。

我已将.load声明放在readURL中。

答案 1 :(得分:1)

在调用document.ready()时,不确定您的图像标记是否应绑定到文档。 readURL()函数不会从实际创建img标记的任何地方调用。