CODEWITHSUNDEEP
javascriptjqueryhtml
Dinand
Dinand

Reputation: 359

Jquery loaded image not reacting on class

In a html page I load manual 3 images in a div. By jquery I load all images from a dir in the same div.

By clicking on the image the manual added react on the class and insert them self in a textbox (a contenteditable div)

The jquery added will not react at all.

All code of the images is the same.(f12)

I guess it's something with time of load. but can anybody help me with this.

My code (script)

<script>
    $(function () {
        loadicon('#mydiv', "../images/ico", "25px", "25px");
        $('.InsertEmo').click(function () {
            var img = " <img src=\"" + $(this).attr('src') + "\" width=\"" + $(this).attr('width') + "\" height=\"" + $(this).attr('height') + "\" /> ";
            $('#divMessage').html($('#divMessage').html() + " " + img + " ");
        });
    });

    function loadicon(tab, dir, imgWidth, imgHeight) {

        var fileextension = [".gif", ".png", ".jpg", ".ico"];
        var filename;

        $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: dir,
            success: function (data) {
                //Lsit all png file names in the page
                $(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + "), a:contains(" + (fileextension[2]) + "), a:contains(" + (fileextension[3]) + ")").each(function () {
                    filename = this.href.replace(window.location.host, "").replace("http:///", "");
                    $(tab).append($("<img type='image' src=" + "../" + filename + " width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" class='InsertEmo' />"));
                });
            }
        });
    }
</script>

Mycode HTML

    <div class="messageBar" style="min-height: 30px; width:800px;">
        <div id="divMessage" contenteditable="true" class="textbox single-line" style="float:left; border: 1px solid black; width: 300px "></div>
    </div>
    <br/>
    <div id="mydiv">
        <img type="image" src="../Images/checkmark.ico" width="25px" height="25px" class="InsertEmo" />
        <img type="image" src="../Images/folder.ico" width="25px" height="25px" class="InsertEmo" />
        <img type="image" src="../Images/skype.ico" width="25px" height="25px" class="InsertEmo" />
    </div>

Thanx Dinand

Upvotes: 0

Views: 50

Answers (2)

Marvin Emil Brach
Marvin Emil Brach

Reputation: 3972

The first three images got the handler, because you're binding it after page load. But then the reloaded images are not created, so the selector will not include them. You have to bind the click handler for every created image again:

   var $image = $("<img type='image' src=" + "../" + filename + " width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" class='InsertEmo' />");

   $image.click(function () {
       var img = " <img src=\"" + $(this).attr('src') + "\" width=\"" + $(this).attr('width') + "\" height=\"" + $(this).attr('height') + "\" /> ";
        $('#divMessage').html($('#divMessage').html() + " " + img + " ");
    });

   $(tab).append($image);

Upvotes: 0

taxicala
taxicala

Reputation: 21759

You have to delegate your click event:

$('#mydiv').on('click', '.InsertEmo', function () {
            var img = " <img src=\"" + $(this).attr('src') + "\" width=\"" + $(this).attr('width') + "\" height=\"" + $(this).attr('height') + "\" /> ";
            $('#divMessage').html($('#divMessage').html() + " " + img + " ");
        });

That way dynamically addded elements will get the event delegated from its parent element.

Upvotes: 2

Related Questions