jQuery $("img").click not working for dynamically made grid of images

Question

I'm working on a small project for one of my friends. It generates a grid of images, then when you click one of the images it should change to another image which has its src stored in a variable. For some reason the .click handler isn't working for only the grid.

here is the html:

    <body class="holder">
    <div class="row">
        <img class="template tileSelect" src="resources/grassTexture.jpg">
    </div>

</body>

Here is the javascript:

$(".tileSelect").click(function(){
    alert("tile clicked")
    // Change src attribute of image
    $(this).attr("src", currentlySelected);
    console.log("image changed");
    return false;
});

here is the whole js file for reference on how the grid is made:

$( "#builder" ).click(function() {
    var rows = $("#rowNum").val();
    var columns = $("#colNum").val();
    console.log(rows);
    console.log(columns);
    $( ".worldmaker" ).addClass( "hide" );
    $( ".topElements" ).removeClass( "hide" );



    //populate the world
    for(i = 0; i < rows; i++){
        //populate the row
        var x = $(".template").clone();
                x.addClass("tile");
                x.removeClass("template");
                $(".row").append($(x))
            console.log("inserting");
        }
        //grab the row and clone it. create a template
        x = $(".row").clone();
        x.addClass("template2");
        //insert the template into the document
        $(".holder").append($(x));



        for(i=0;i<columns - 1;i++){
        //populate the columns
        //grab the template
            x = $(".template2").clone();
            //add the row class
            //remove the template class
            x.removeClass("template2");
            //insert it
            $(".holder").append($(x))
            console.log("inserting column "+ x);
        }
    return false;
  });

var showlines = 1;

  $( "#gridlines" ).click(function() {
      if(showlines == 1){
        $('.tile').css('border',"0px solid #021a40");
        showlines = 0;
      }else{
        $('.tile').css('border',"1px solid #021a40");
        showlines = 1;
      }


return false;
  });








/*

*/




var currentlySelected = "/resources/treeTexture.png";

$(".element" ).click(function() {
console.log(jQuery(this).children("img"));

return false;


});


$(".tileSelect").click(function(){
    alert("tile clicked")
    // Change src attribute of image
    $(this).attr("src", currentlySelected);
    console.log("image changed");
    return false;
});

I'd appreciate any help with figuring out why even the alert wont display when a tile is selected. Everything else in the js seems to be working.

Try using delegation approach `$("body").on('click', '.tileSelect', function(){.......` — Mamun, May 14 '20 at 19:54
I don't see `$("img")` anywhere in your code. But regardless... if you are dynamically creating elements, they do not have the event attached if you used `.click()`. To resolve that, instead of `$(...).click( ...)` use `$(...).on('click', ...)`. — lurker, May 14 '20 at 19:54

score -1 · Answer 1 · answered May 14 '20 at 20:00

-1

Try this code below... It should work for you

$("img.tileSelect").on('click', function(){
    alert("tile clicked")
    // Change src attribute of image
    $(this).attr("src", currentlySelected);
    console.log("image changed");
    return false;
});

answered May 14 '20 at 20:00

KANAYO AUGUSTIN UG

2,078
3
17
31

This does not account for dynamically created images. – Taplar May 14 '20 at 20:46

jQuery $("img").click not working for dynamically made grid of images

1 Answers1