Question

我有一个HTML div：

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

我在foreach循环内打印。我正在使用ajax处理它上面的click()事件并将其文本更改为Done!，因此我的输出如下：

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

如果我运行循环4次并且我点击其中一个div（即具有类text_icon的那个），那么只有第一个正在工作，而{{1}的其余部分正在工作} s无效。

Answer 1

更新：

您的更新表明以下不是问题，ID是唯一的。

如果没有你的 jQuery代码，很难帮助你调试，所以这里有一个如何可以

完成的例子：

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>

使用jQuery的JavaScript代码：

$("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

原始答案：

如果您真的使用“DIV id ='text_icon'class =”text_icon .... / DIV“，例如：

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

...然后问题是id不是唯一的。 ID值必须在页面上是唯一的reference）。这似乎符合你描述的症状，“只有第一个”工作。大多数浏览器在给出具有多个ID的无效HTML时，将按文档顺序使用第一个元素上的ID，并忽略剩余的ID。

如果您根本不需要div来获取ID，则可以将其删除。否则，只需确保ID是唯一的，例如：

<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>

Answer 2

据我所知，你给你的div有相同的ID。使用相同ID定位多个元素是不可能的，ID必须是唯一的。

试试这个：

$i = 1;
foreach ($array as $al) {
    echo "<div id='text_icon_$i'>blablabla</div>";
    $i++;
}

当然，您还需要修改您的jQuery代码，以包含可能无限数量的此类ID（我不知道这种方式的性能是否良好，但我记得曾经做过一次评论列表博客）。

另一种方法是使用公共类而不是唯一ID：）。

Answer 3

除了关于唯一ID的争论之外，是否还需要在ajax调用之后再次连接点击处理程序？如果是这样，最好使用.live而不是.click。

$("div.text_icon").live("click",
    function(event) { 
         var icon = $(this); 
    } 
}

处理foreach循环中生成的div上的jQuery单击事件

3 个答案: