Home/ Questions/Q 3353988
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:13:04+00:00

I would like to use the click() function of jQuery within a for loop

  • 0

I would like to use the click() function of jQuery within a for loop in order to make three HTML elements clickable. I created a simple test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" />
  <script type="text/javascript">
    $(window).load(function() {
      function loadContent(){
        var values = ['a','b','c'];
        for (var i = 0; i < values.length; ++i) {
          var id = values[i];
          alert(id);
          $('#' + id).click(function() {
            function2(id);
          });
        }
      }

      function function2(id) {
        // do some fancy stuff like...
        alert(id);
      }

      loadContent();
    });
  </script>
</head>
<body>
  <div id="map">
    <a id="a">a</a>
    <a id="b">b</a>
    <a id="c">c</a>
  </map>
</body>

As you can see, I would like to display the character ‘a’ if I click on ‘a’ (a), display ‘b’ while clicking on ‘b’, and so on. Unfortunately, the character ‘c’ is displayed while clicking on ‘a’. No other events are triggered. I do not see the mistake I commit.

I don’t bother if this code is efficient or not. I just want to know, why click() does not act as expected in this context. Thanks in advance for any hints or solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a few issues here:

    • All your id attributes are set to id="a" so you’re re-binding the first element each time (this is the main issue with your click handler). Set the second to id="b" and the third to id="c".
    • <script> elements can’t be self-closing, our jQuery include needs fixing from /> to ></script>
    • </map> should be </div>
    • You’re re-using id scoped to the function, but there’s no need you might as well use function2(this.id) as the simplest fix for your case.

    You can test the updated/working version here.

    • 0