JSFiddle - React, Tailwind, and code Playground

by tapas_23571113

HTML

<div>
    <p>
        <button id="add-image">Add Image</button>
    </p>
    <p>
        <img class="no-image-aware" src="http://invalid.jpg"/>
    </p>
    <hr/>
    <div id="image-holder"></div>
</div>

JavaScript

var counter = 0;

$(document).ready(function(){
    $('#add-image').on('click', function(){        
        var image = null;
        
        if(counter%2==0) {
            image = $('<img src="http://blogs.ubc.ca/CourseBlogSample01/wp-content/themes/thesis/rotator/sample-1.jpg" id="dynamic-'+counter+'" class="no-image-aware"/>');
        } else {
            image = $('<img src="http://invalid.jpg" id="dynamic-'+counter+'"/>');
        }
        
        $('#image-holder').append(image);
        $('#image-holder').append('<hr/>');
        counter++;
    });    
    
    $(document).on('load', 'img', function(){
        console.log('from delegated load--> ' + $(this).attr('src'));
    });   
    
    $('.no-image-aware').load(function(){}).error(function(){
        console.log('from image load--> ' + $(this).attr('src'));
    });
});