jquery 只选择第一个元素答案

【问题标题】：jquery only selecting first elementjquery 只选择第一个元素
【发布时间】：2011-09-20 20:34:51
【问题描述】：

我正在尝试为页面上的每个保存范围添加按钮和单击侦听器。我愿意：

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

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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

Id 对于所有元素必须是唯一的！！！

您已经为绑定到点击功能定义了一个ID selector。每个元素应该只有一个 ID，因为 $('#save') 只会绑定到一个元素（第一个元素）。如果您想绑定到以这种方式使用的所有跨度，则向每个跨度添加一个类并以这种方式引用它，使用 class selector

$('span.mysave')

【讨论】：

这不能解决在初始页面加载后编辑/附加页面内容时丢失事件处理程序的问题。
@jondavidjohn....同意。我看了你的例子，我明白你在说什么。但在这种情况下，我仍然会选择delegate() 而不是live()
在大多数的情况下，这纯粹是个人喜好，为什么在这种情况下具体？你认为我们有足够的信息来打这个电话吗？
是的，我认为我们确实有足够的信息来打这个电话。由于他附加到同一个对话框，我们可以从那里委托事件，而不是一路返回正文。

【解决方案2】：

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

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

我建议向您的元素添加一个类，而不是依赖匹配的 id。

其次，如果您正在向页面动态添加元素，请使用 .live('click', ...) 而不是 .click() 以便能够与当前的 和添加到页面的未来元素。

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

【讨论】：

【解决方案3】：

save 是一个 ID，因此只能在页面上出现一次。 $('#save')maps 到 document.getElementById('save') 返回一个元素。

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

【讨论】：

【解决方案4】：

#save 是一个 ID。 ID 应该是唯一的。 jQuery 假设这一点并且只获取第一个元素。使用类代替 ID。

想像这样的名称、类和 ID 属性：

元素可以有一个名称，但它们不必是唯一的。多个元素可以同名
元素可以属于或更多类。多个元素可以在同一个类中。
IDs 是该元素的唯一 ID。

【讨论】：

【解决方案5】：

# 表示id 和id='save' 仅对每个文档的一个元素有效（一个id 的值不能使用超过一次强>）。改用class='save' 并使用

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

与其他回复不同，我猜“第一个”保存按钮的意思是当您 loadPage() 时，您正在用 id="save" 替换元素的祖先的内容。

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

因此，在调用loadPage() 之后，您必须再次调用click() 来绑定函数（还要再次绑定button()，因为这改变了旧元素，因此也需要指示更新新元素）。

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

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

虽然这不允许你重新调用button()。

【讨论】：

从问题上很难说，但完全有可能loadPage() 的操作正在替换保存按钮，无论是有意还是由于不建议使用html()。

【解决方案8】：

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

【讨论】：