Question

我有一个表，每行包含一个输入和一个“保存”图像。

<td>
 <div id="acp_1" style="margin-left:100px;display: inline">
   <input size="10" type="text" value="11:00" name="acpr_1" id="acpr_1" />
   <span class="modify-listener" id="ml_1">
     <img id="save_1" src="/images/skin/database_save.png" alt="modify"/>
   </span>
 </div>
</td>

<td>
 <div id="acp_2" style="margin-left:100px;display: inline">
   <input size="10" type="text" value="11:00" name="acpr_2" id="acpr_2" />
   <span class="modify-listener" id="ml_2">
     <img id="save_2" src="/images/skin/database_save.png" alt="modify"/>
   </span>
 </div>
</td>

__ 数字模式用于区分一行的元素。

我需要捕获图像上的click事件，因此我可以在后端保存输入值。类似的东西：

Event.observe('modify-listener', 'click', function(){
   ....

如何检测单击哪一行图像，以便可以使用正确的值调用Ajax函数？

感谢。

Answer 1

您要搜索的技术称为 event delegation 。它基本上意味着您在树的更高杠杆上处理事件，以便只有一个事件处理程序而不是许多。

您需要做的是找到包含所有图片的容器元素（例如它们所在的表格），并将其用作事件处理的基础，并将其ID提供给Event.observe。然后，您可以使用Event.findElement方法找出单击的img。

Event.observe('target', 'click', function(event) {
  alert( Event.findElement(event, 'IMG').id ); // e.g.: save_1
});

假设您的表格标识为#target

您可以找到有效的 demo here 。

区分Prototype中的行元素

1 个答案: