1

Before I start I know this may be a duplicate. I have looked at the solution of the following:

jQuery .load() not working on my image

and changed my code. However I still can't get the load to fire. I've tried changing the .load to .on('load' ...) and basically butchered my code trying to get this working... I still can't get the alert() to fire... Any ideas?

<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>
Community
  • 1
  • 1
johhny B
  • 1,342
  • 1
  • 18
  • 37
  • 1
    Because you are attaching the event handler before the image is added to the page. – epascarello Jun 03 '16 at 13:02
  • 2
    `id`s must be unique. It looks like you are using multiple times. Not the exact issue. But that is not a good practice. – rrk Jun 03 '16 at 13:04
  • Rejith I don't see any id duplication? which one? – johhny B Jun 03 '16 at 13:06
  • Hi Epascarello, I thought it would still be picked up even if elements with the id are dynamically added? – johhny B Jun 03 '16 at 13:25
  • Possible duplicate of [JQuery .on() event handler usage for dynamically loaded image](http://stackoverflow.com/questions/27332423/jquery-on-event-handler-usage-for-dynamically-loaded-image) – johhny B Jun 03 '16 at 13:48

2 Answers2

1

Try

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

As a way to bind the load event to #aaa This way, dynamically added #aaa elements still get the event bound to them.

EDIT: https://jsfiddle.net/4b8340gu/ Please check out this jsFiddle with slight changes to your code that make it work.

I've placed the .load declaration in readURL.

Floris
  • 653
  • 4
  • 10
1

Not sure but your image tag should bind to the document when calling document.ready(). The readURL() function is not called from anywhere which actually create the img tag.

sib10
  • 1,104
  • 1
  • 9
  • 15
  • sorry i missed the line when editing. please see now – johhny B Jun 03 '16 at 13:15
  • look into the below code - document.body.addEventListener( 'load', function(event){ var elm = event.target; if( elm.id === 'my_img'){ // or any other filtering condition // do some stuff } }, true // Capture event ); – sib10 Jun 03 '16 at 13:37
  • already answered in the following thread - http://stackoverflow.com/questions/27332423/jquery-on-event-handler-usage-for-dynamically-loaded-image – sib10 Jun 03 '16 at 13:38