Using jquery to replace the src= on images, what is causing these duplicated console messages?-CodePudding

General premise:

an HTML page with two images, IDs are #me1 and #me2
the images start out pointing to 1.jpg and 2.jpg
if #me1 is clicked, we use jquery to make a GET request to a PHP script "randim.php" which returns a randomly-selected filename; this filename needs to be placed in the src= of #me2
if #me2 is clicked, the same thing happens except it replaces the src= of #me1
important to note, clicking each image changes the OTHER image, not itself
Log to the console before swapping out the src= on an image, and then again after the image has finished loading

Code:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      var nextimg;
      
      function start() {
        console.log("First #me1 image is "   $('#me1').attr("src"));
        console.log("First #me2 image is "   $('#me2').attr("src"));
      }
            
      function clickedme1() {
      console.log("#me1 has been clicked, need to replace the image in #me2");
        nextimg = $.ajax({
            type: "GET",
            url: "randim.php",
            async: false
        }).responseText;
        console.log("Next image is for #me2 is "   nextimg);
        $('#me2').attr("src", nextimg);
        $('#me2').on("load", function() {
            console.log("Finished loading "   nextimg   " in #me2");
        });
      }

      function clickedme2() {
      console.log("#me2 has been clicked, need to replace the image in #me1");
        nextimg = $.ajax({
            type: "GET",
            url: "randim.php",
            async: false
        }).responseText;
        console.log("Next image is for #me1 is "   nextimg);
        $('#me1').attr("src", nextimg);
        $('#me1').on("load", function() {
            console.log("Finished loading "   nextimg   " in #me1");
        });
      }

    </script>
    <style>#me1, #me2 { width: 400px; height: 400px }</style>
  </head>
  <body>
    <img id="me1" onClick="clickedme1()" src="images/1.jpg">
    <img id="me2" onClick="clickedme2()" src="images/2.jpg">
    <script>window.onload = start();</script>
  </body>
</html>

It seems to be working pretty well except something is going with the console logging. Log messages are being duplicated, and the more I click, the more duplicates the log messages become.

Note the blue circles indicating duplicate log messages:

I've verified the duplicate log messages happen in both Chrome and Firefox

Logs of the web server appear normal, I'm not seeing any unexpected requests to the server. Each click results in one request to randim.php and then one request for an image.

What am I missing here?

NOTE: the contents of the PHP script (randim.php) don't really matter, I know it's reliable, I've been using it for months in different contexts, but just for the sake of completeness, it's the script from https://www.phpjunkyard.com/random-image.php.

Other things that probably don't matter: web server is Apache/2.4.41 on Ubuntu 20.04.4 LTS

CodePudding user response：

Every time you click one of your images, you create a new load event handler with this code:

$('#me1').on("load", function() {
    console.log("Finished loading "   nextimg   " in #me1");
});

So after 1 click you have one event handler giving a message, after 2 clicks you have 2 event handlers, after 3... etc. etc.

Move that code out of the clickme functions and into your main script code or use .one instead.

CodePudding user response：

This is because you are binding an event handler to the "on" event every time you click the image. You can make use of jQuery's .one(), which will only trigger it once.