how make a .click() function reusable

Question

Essentially, i have been unable to find a way to make the following .click() work more than once. My intent is to make is so that repeating clicks of the .gen2 class will continually .remove() the current .gen2 image and replace it with a randomly selected image from myArray.

$(document).ready(function(){
  $('.gen2').click(function(){
    $('.gen2').remove();
    var myArray = ['<img class="gen2" src="images/bottom/chinchilla.png" />', 
    '<img class="gen2" src="images/bottom/bird.png" />', 
    '<img class="gen2" src="images/bottom/bluejay.png" />',  
    '<img class="gen2" src="images/bottom/walrus.png" />'];
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
    $('.change').append(rand);
});
  $('.gen1').click(function(){
    $('.gen1').remove();
    var array = ['<img class="gen1" src="images/top/raven.png" />', 
    '<img class="gen1" src="images/top/boar.png" />', 
    '<img class="gen1" src="images/top/trex.png" />'];
    var rand = array[Math.floor(Math.random() * array.length)];
    $('.change').append(rand);
});});

HTML is as follows. because the positions of both .gen1 and .gen2 are set to absolute, they overlap so that as each is removeed and proceedurally replaced with .append(), a new image is formed.

<body>
    <div class="change">
        <img class="gen1" src="images/top/raven.png" />
        <img class="gen2" src="images/bottom/chinchilla.png" />
    </div>

the problem is that after the first click(); the function no longer runs. I can't figure how..

Thanks!

Although some of the answers below work, I suggest you change only the `.src` property. It is more efficient then re creating a dom element every time. — Ibu, Aug 07 '15 at 05:02

Tushar · Answer 1 · 2015-08-07T05:14:28.230

Use Object to store the images sources
Store only images source URL in object of arrays. Don't add HTML
Use data- custom attribute on the image to store custom data
Don't remove and add HTML elements in DOM. Update the src value of the element.
Add Common class to bind events on elements

Note: As the image is picked randomly, there are chances when the image may not change on click i.e. image is changed but next image is same as previous.

var obj = {
  'gen1': ['',
    'images/top/boar.png',
    'images/top/trex.png'
  ],
  'gen2': ['http://www.ggdesignsembroidery.com/store/images/uploads/Chubby1.jpg',
    'http://www.ggdesignsembroidery.com/store/images/uploads/Chubby2.jpg',
    'http://www.ggdesignsembroidery.com/store/images/uploads/Chubby3.jpg',
    'http://www.ggdesignsembroidery.com/store/images/uploads/Chubby4.jpg'
  ]
};

$('.change').on('click', '.gen', function() {
  var myArray = obj[$(this).data('target')];
  var rand = myArray[Math.floor(Math.random() * myArray.length)];

  $(this).attr('src', rand);
});

img {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="change">
  <img class="gen1 gen" src="images/top/raven.png" data-target="gen1" />
  <!--             ^^^: Common Class               ^^^^^^^^^^^: Custom Attribute -->
  <img class="gen2 gen" src="http://www.ggdesignsembroidery.com/store/images/uploads/Chubby1.jpg" data-target="gen2" />
  <!--             ^^^: Common Class                                                              ^^^^^^^^^^^: Custom Attribute -->
</div>

Images taken from http://www.ggdesignsembroidery.com/

Using your code the image still changes only once, is there a part I may be missing or overlooking? — Charles Ratajczak-Smith, Aug 07 '15 at 05:28
@CharlesRatajczak-Smith Yes you missed `Note: As the image is picked randomly, there are chances when the image may not change on click i.e. image is changed but next image is same as previous.` from answer. — Tushar, Aug 07 '15 at 05:31
so I should completely replace my jQuery with yours and tweek the 'src's and have it work? — Charles Ratajczak-Smith, Aug 07 '15 at 05:42

Pranav C Balan · Answer 2 · 2015-08-07T05:11:37.223

You want to listen dynamically added elements , so you need to use event delegation

$(document).ready(function() {
  var myArray = ['<img class="gen2" src="images/bottom/chinchilla.png" />',
      '<img class="gen2" src="images/bottom/bird.png" />',
      '<img class="gen2" src="images/bottom/bluejay.png" />',
      '<img class="gen2" src="images/bottom/walrus.png" />'
    ],
    array = ['<img class="gen1" src="images/top/raven.png" />',
      '<img class="gen1" src="images/top/boar.png" />',
      '<img class="gen1" src="images/top/trex.png" />'
    ];

  $('.change').on('click', '.gen2', function() {
    $('.gen2').remove();
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
    $('.change').append(rand);
  }).on('click', '.gen1', function() {
    $('.gen1').remove();
    var rand = array[Math.floor(Math.random() * array.length)];
    $('.change').append(rand);
  });
});

score 0 · Answer 3 · edited Aug 07 '15 at 05:03

0

Try this:

$(document).ready(function(){
    $(document.body).on('click','.gen2',function(){
      //your code here
    });
    $(document.body).on('click','.gen1',function(){
      //your code here
    });
});

edited Aug 07 '15 at 05:03

Rohit Arora

2,246
2
24
40

answered Aug 07 '15 at 04:57

Muhammad Atif

1,050
1
9
21

score 0 · Answer 4 · answered Aug 07 '15 at 05:06

I think this is a better approach and may be you can combine the two with more generic selector like $('.change>img')

$(document).ready(function(){
  $('.gen2').click(function(){
    var myArray = ["images/bottom/chinchilla.png" ,"images/bottom/bird.png" ,"images/bottom/bluejay.png","images/bottom/walrus.png" ];
    var rand = myArray[Math.floor(Math.random() * myArray.length)];
     $(this).attr("src",rand);
});
  $('.gen1').click(function(){
    var array = ["images/top/raven.png" ,"images/top/boar.png","images/top/trex.png"];
    var rand = array[Math.floor(Math.random() * array.length)];
     $(this).attr("src",rand);
});});

score 0 · Answer 5 · answered Aug 07 '15 at 05:22

You would need to rebind the click event, because the initial binding was deleted when you removed the image.

Hope this code helps

$(document).ready(function(){

    $('.gen2').click(gen2);
    $('.gen1').click(gen1);

    function gen2(){
        $('.gen2').remove();
        var myArray = ['<img class="gen2" src="images/bottom/chinchilla.png" />', 
                       '<img class="gen2" src="images/bottom/bird.png" />', 
                       '<img class="gen2" src="images/bottom/bluejay.png" />',  
                       '<img class="gen2" src="images/bottom/walrus.png" />'];
        var rand = myArray[Math.floor(Math.random() * myArray.length)];
        $('.change').append(rand);
        $('.gen2').click(gen2);
    }

    function gen1(){
         $('.gen1').remove();
        var array = ['<img class="gen1" src="images/top/raven.png" />', 
                     '<img class="gen1" src="images/top/boar.png" />', 
                     '<img class="gen1" src="images/top/trex.png" />'];
        var rand = array[Math.floor(Math.random() * array.length)];
        $('.change').append(rand);
        $('.gen1').click(gen1);
    }
});

how make a .click() function reusable

5 Answers5