2011-09-20 313 views
2

我正在嘗試添加按鈕,並單擊每個頁面上的保存跨度的偵聽器。我這樣做:jquery只選擇第一個元素

$("#save").button().click(function(){ 
    currentSlide++; 
    loadPage(); 
} 

loadPage清除我的對話框並將下一張幻燈片加載到框中。如果我沒有將該代碼添加到加載頁面函數中,則只會爲該按鈕分配第一個保存按鈕,然後單擊偵聽器。爲什麼我需要每次分配監聽器。不應該jQuery分配按鈕,並單擊監聽器的所有#save?

所有的幻燈片都存儲在頁面上。載入頁面將獲取隱藏的內容並將其附加到對話框。

回答

6

編號必須是所有元素都是唯一的!

您已經定義了一個ID selector爲您綁定點擊功能。每個元素只能有一個ID,因此$('#save')只會綁定到一個元素(第一個元素)。如果你要綁定以這種方式使用的所有跨度再添加一個類每個跨度和參考這種方式,使用class selector

$('span.mysave') 
+4

如果我對每個問題都有一個答案...... – Jack

+0

@ Jack ..是的,我相信我已經回答了其中的很多 –

+1

這並沒有解決編輯頁面內容時丟失事件處理程序的問題/在初始頁面加載後附加。 – jondavidjohn

4

首先,你不應有一個頁面上的多個元素共享相同的id屬性。

id屬性被保留爲頁面中單個元素的唯一標識符。

我會建議添加一個類到您的元素,而不是依靠匹配的ID。

其次,如果你是動態添加元素的頁面,使用.live('click', ...),而不是.click()能夠與添加到頁面當前未來元素的工作。

// note selecting class ".save" instead of id "#save" 
$(".save").button().live('click', function(){ 
    currentSlide++; 
    loadPage(); 
} 
1

我有一種感覺,你在頁面上多次使用ID save。至少,使用#save作爲jQuery選擇器只會選擇一個元素,因爲它是一個ID。

id="save"替換爲class="save"並使用.save用jQuery進行選擇 - 類可以多次使用,甚至可以在一個元素上使用多個類。

2

#裝置idid='save'有效期爲每個文檔只有一個元素(一個id的值不能使用多於一次)。使用class='save'來代替,而

$(".save").button().click(function(){

2

保存爲一個ID,因此應該只在頁面上一次。 $('#save')映射到document.getElementById('save'),它返回一個元素。

如果您正在加載加載內容,您應該使用livedelegate

2

#save是一個ID。 ID應該是唯一的。 jQuery假設這隻會獲得第一個元素。而不是一個ID,使用一個類。

想到這個名字,類和ID屬性是這樣的:

  • 元素可以有一個名字,但他們不必是唯一的。多個元素可以具有相同的名稱
  • 元素可以在一個或多個類中。多個元素可以在同一個類中。
  • ID是該元素的唯一ID。
0

不像其他的答覆,我猜測,由「第一」保存按鈕,你的意思是你與id="save"當你loadPage()更換元素的祖先的內容。

如果是這種情況,當您調用click()時jQuery綁定的原始「保存按鈕」元素已被銷燬,並替換爲jQuery不知道的新元素。只有當你第一次創建選擇器時被選中的元素被綁定到;它在更改將匹配的元素集時不會更新。

所以調用loadPage()後,你就必須調用click()再次綁定功能(同樣也button(),因爲這改變了舊的元素,以便將需要被引導到更新新太)。

如果你想「現在任何元素或在具有ID save未來」將事件綁定,那麼你想要的是事件委託(delegate(),或者其可疑的表弟live()):

$(document.body).delegate('#save', 'click', function(){ 
    currentSlide++; 
    loadPage(); 
}); 

雖然這不允許你重新呼叫button()

+0

很難說這個問題,但是'loadPage()'的動作完全有可能是有意或無意使用'html()'來替換保存按鈕。 – bobince

0

其他人說的是真實的,jQuery將返回第一個ID。但是,情況並非總是如此。運行此測試代碼以查看:

<script type="text/javascript" src="/scripts/jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("div").click(function() { 
      //$("#a", $("div")).remove(); // 1 
      $("#a").remove();    // 2 
     }); 
    }); 
</script> 

<div style="border: solid 1px black;"> 
    <p id="a">I am the first paragraph.</p> 
    <p id="a">I am the second paragraph.</p> 
</div> 

當您運行第2行時,它將帶走第一個#a。運行第1行刪除它們。因此,如果您不能將標記更改爲使用類別,則子選擇可能是答案。