Question

I have an HTML div:

<div id='text_icon_<?php $i++; ?>' class="text_icon">Some Text</div>

that I print inside a foreach loop. I am using ajax to handle the click() event on it and change its text to Done!, so I have an output like:

<div class="text">Done!</div>

If I run the loop 4 times and I click on one of the divs (i.e. the one with class text_icon) then only first one is working while the rest of the divs are not working.

Answer 1

Update:

Your update indicates the below is not the problem, the IDs are unique.

Without your jQuery code it’s hard to help you debug, so here’s an example of how it can be done:

HTML:

<div id='text_icon1' class='text_icon'>Div #1</div>
<div id='text_icon2' class='text_icon'>Div #2</div>
<div id='text_icon3' class='text_icon'>Div #3</div>
<div id='text_icon4' class='text_icon'>Div #4</div>

JavaScript code using jQuery:

$("div.text_icon").click(function() {

  // Within the `click` handler, `this` points to the
  // DOM element. If you're kicking off some ajax something,
  // you'll probably be doing something like this:

  // Grab `this` to a variable we can access from the
  // `success` closure
  var theDiv = this;

  // Do our call
  $.ajax({
    url: "your_url_here",
    success: function() {
      // It worked, udate the div
      $(theDiv).text("Done!");
    }
  });

});

Live copy

---

Original answer:

If you’re really using “DIV id=’text_icon’ class=”text_icon…./DIV”, e.g.:

<DIV id='text_icon' class="text_icon">....</DIV>

…then the problem is that the id is not unique. ID values must be unique on the page (reference). That would seem to fit with the symptom you describe, with “only the first one” working. Most browsers, when given invalid HTML with multiple IDs, will use the ID on the first element in document order and ignore the remaining ones.

If you don’t need the div to have an ID at all, you can just remove it. Otherwise, just ensure the ID is unique, e.g.:

<DIV id='text_icon1' class="text_icon">....</DIV>
<DIV id='text_icon2' class="text_icon">....</DIV>
<DIV id='text_icon3' class="text_icon">....</DIV>
<DIV id='text_icon4' class="text_icon">....</DIV>