jQuery单击function仅适用于第一个元素

我在使用jQuery时遇到了一些麻烦。

我正在制作一个简单的CMS，在界面中我有一个页面列表，每个列表项都是一个编辑链接。 我让jQuery用这个编辑ID监听点击。 然后，它将查看父LI以查看它具有的id，以便用户可以将更改保存到数据库中的右侧pageId。

我的列表

 
 edit List item 1 
 
 edit List item 2 
 etc..  

和javascript

  $(document).ready(function() { $('a#edit').click(function(){ alert($(this).parent("li").attr("id")); }) }); 

但只有第一个编辑链接有效。 所有其他人都被忽略了。 您可以在此处查看问题， http：//info.radio-onair.ath.cx/active/scms/admin/pages/test.html

提前致谢。

Answer 1

在HTML中， id指的是唯一标识符 。 换句话说，拥有2个具有相同id元素是违反标准的。 这里的jQuery行为正确。

使用class而不是id来标识您的标记：

HTML：

 
 
 edit List item 1 
 
 edit List item 2 
 etc..  

JavaScript的：

 $(document).ready(function() { $('a.edit').click(function(){ alert($(this).parent("li").attr("id")); }) }); 

---

或者，由于父标记似乎已经具有唯一的类，因此您可以简单地使用它来定位所需的标记。 这将减少我称之为“类噪声”（将无用类定义为可以由其父级的唯一属性作为目标的目标元素）。

HTML：

 
 
 edit List item 1 
 
 edit List item 2 
 etc..  

JavaScript的：

 $(document).ready(function() { $("li.sortable a:contains('edit')").click(function(){ alert($(this).parent("li").attr("id")); }) }); 

Answer 2

我认为这是因为use对每个元素使用相同的id 。 尝试使用类来代替。

 edit 

然后

 $('a.edit').click(...) 

Answer 3

您不能拥有两个具有相同ID的元素。 这是无效的HTML。 也许你想要一堂课呢？

尝试：

 
 
 edit List item 1 
 
 edit List item 2 
 etc.. 
  

Answer 4

ID必须是唯一的，而类名可以是相同的。

Answer 5

我尝试了你的链接，看起来所有的警报都已连线并正常工作，只是没有按顺序排列（2是5等）

Answer 6

如果您不想更改HTML（但您应该），可以尝试这样做：

 $(document).ready(function() { $('a:contains("edit")').click(function(){ alert($(this).parent("li").attr("id")); }) }); 

Answer 7

我不知道其他人说了什么，但我只是换了一个

从花哨的盒子...到我的html / php页面末尾的这个脚本......以及标签

  $(document).ready(function(){ $('a[rel="anyclassname"]').fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); }); "