jquery只选择第一个元素

问题描述：

我正在尝试添加按钮，并单击每个页面上的保存跨度的侦听器。我这样做：jquery只选择第一个元素

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

loadPage清除我的对话框并将下一张幻灯片加载到框中。如果我没有将该代码添加到加载页面函数中，则只会为该按钮分配第一个保存按钮，然后单击侦听器。为什么我需要每次分配监听器。不应该jQuery分配按钮，并单击监听器的所有#save？

所有的幻灯片都存储在页面上。载入页面将获取隐藏的内容并将其附加到对话框。

答

编号必须是所有元素都是唯一的！

您已经定义了一个ID selector为您绑定点击功能。每个元素只能有一个ID，因此$('#save')只会绑定到一个元素（第一个元素）。如果你要绑定以这种方式使用的所有跨度再添加一个类每个跨度和参考这种方式，使用class selector

$('span.mysave')

如果我对每个问题都有一个答案...... – Jack

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

这并没有解决编辑页面内容时丢失事件处理程序的问题/在初始页面加载后附加。 – jondavidjohn

答

首先，你不应有一个页面上的多个元素共享相同的id属性。

id属性被保留为页面中单个元素的唯一标识符。

我会建议添加一个类到您的元素，而不是依靠匹配的ID。

其次，如果你是动态添加元素的页面，使用.live('click', ...)，而不是.click()能够与添加到页面当前和未来元素的工作。

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

答

我有一种感觉，你在页面上多次使用ID save。至少，使用#save作为jQuery选择器只会选择一个元素，因为它是一个ID。

将id="save"替换为class="save"并使用.save用jQuery进行选择 - 类可以多次使用，甚至可以在一个元素上使用多个类。

答

#装置id和id='save'有效期为每个文档只有一个元素（一个id的值不能使用多于一次）。使用class='save'来代替，而

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

答

保存为一个ID，因此应该只在页面上一次。 $('#save')映射到document.getElementById('save')，它返回一个元素。

如果您正在加载加载内容，您应该使用live或delegate。

答

#save是一个ID。 ID应该是唯一的。 jQuery假设这只会获得第一个元素。而不是一个ID，使用一个类。

想到这个名字，类和ID属性是这样的：

元素可以有一个名字，但他们不必是唯一的。多个元素可以具有相同的名称
元素可以在一个或多个类中。多个元素可以在同一个类中。
ID是该元素的唯一ID。

答

不像其他的答复，我猜测，由“第一”保存按钮，你的意思是你与id="save"当你loadPage()更换元素的祖先的内容。

如果是这种情况，当您调用click()时jQuery绑定的原始“保存按钮”元素已被销毁，并替换为jQuery不知道的新元素。只有当你第一次创建选择器时被选中的元素被绑定到;它在更改将匹配的元素集时不会更新。

所以调用loadPage()后，你就必须调用click()再次绑定功能（同样也button()，因为这改变了旧的元素，以便将需要被引导到更新新太）。

如果你想“现在任何元素或在具有ID save未来”将事件绑定，那么你想要的是事件委托（delegate()，或者其可疑的表弟live()）：

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

虽然这不允许你重新呼叫button()。

很难说这个问题，但是'loadPage（）'的动作完全有可能是有意或无意使用'html（）'来替换保存按钮。 – bobince

答

其他人说的是真实的，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行删除它们。因此，如果您不能将标记更改为使用类别，则子选择可能是答案。

jquery只选择第一个元素

相关推荐