jQuery點擊功能只適用於第一個元素

我正在做一個簡單的CMS，並且在界面中我有一個頁面列表，每個列表項中都有一個編輯鏈接。我讓jQuery監聽具有該編輯標識的點擊。然後，它會查看父LI以查看它的ID，以便用戶可以將更改保存到數據庫中的正確pageId。

我的列表

<ul id="sortable" class="ui-sortable"> 
    <li class="sortable" id="listItem_1"> 
     <a href="#" id="edit">edit</a> 
     <span id="title">List item 1</span> 
    </li> 

    <li class="sortable" id="listItem_2"> 
     <a href="#" id="edit">edit</a> 
     <span id="title">List item 2</span> 
    </li> 

    etc.. 
</ul>

和JavaScript

<script type="text/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

在此先感謝。

來源

2009-07-30 Macint

在HTML中，id指唯一標識符。換句話說，具有相同的id的2個元素是違反標準的。 jQuery在這裏表現正確。

使用class，而不是一個id識別您的標籤，例如：

HTML：

<ul id="sortable" class="ui-sortable"> 
    <li class="sortable" id="listItem_1"> 
     <a class="edit" href="#">edit</a> 
     <span id="title">List item 1</span> 
    </li> 

    <li class="sortable" id="listItem_2"> 
     <a class="edit" href="#">edit</a> 
     <span id="title">List item 2</span> 
    </li> 

    etc.. 
</ul>

的JavaScript：

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

或者，由於父標記已經具有唯一的類，因此您可以簡單地使用它來定位想要的標記。這將減少我所說的「類噪聲」（定義無用類到目標元素，可以由其父元素的唯一屬性來定位元素）。

HTML：

<ul id="sortable" class="ui-sortable"> 
    <li class="sortable" id="listItem_1"> 
     <a href="#">edit</a> 
     <span id="title">List item 1</span> 
    </li> 

    <li class="sortable" id="listItem_2"> 
     <a href="#">edit</a> 
     <span id="title">List item 2</span> 
    </li> 

    etc.. 
</ul>

的JavaScript：

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

來源

2009-07-30 14:23:49

啊，是它的工作原理，謝謝。有趣的是，我沒有想到你的其他方法。可以用它來代替。再次感謝。 – Macint 2009-07-30 14:32:39

你不能有兩個具有相同ID的元素。這是無效的HTML。也許你想要一個班級呢？

嘗試：

<ul id="sortable" class="ui-sortable"> 
    <li class="sortable" id="listItem_1"> 
     <a href="#" class="edit">edit</a> 
     <span id="title">List item 1</span> 
    </li> 

    <li class="sortable" id="listItem_2"> 
     <a href="#" class="edit">edit</a> 
     <span id="title">List item 2</span> 
    </li> 

    etc.. 
</ul> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $('a.edit').click(function(){ 
     alert($(this).parent("li").attr("id")); 
    }) 
}); 
</script>

來源

2009-07-30 14:21:44

ID必須是唯一的，而類名可以是相同的。

來源

2009-07-30 14:21:50 Dirk

我想你的鏈接，它看起來像所有的警報都連接好並正常工作，只是沒有按順序（2 5等）

來源

2009-07-30 14:22:21

我想這是因爲使用使用相同的ID每個元素爲。嘗試使用類來代替。

<a href="#" class="edit">edit</a>

然後

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

來源

2009-07-30 14:22:57 lazy1

如果你不想改變你的HTML（但你應該）你可以試試這個：

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

來源

2009-07-30 14:25:59 eKek0

我不知道大家是什麼本質上說，但我只是改變了

<a id="anyidname"..

從幻想中...這個腳本在我的HTML/PHP頁面結束時... ...和標籤

<a rel="anyclassname".. 

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

來源

2014-02-18 18:34:47 user3315100

jQuery點擊功能只適用於第一個元素

回答

相關問題