想知道为什么这个 jQuery 不起作用？ [复制]答案

【问题标题】：Wondering why this jQuery doesn't work? [duplicate]想知道为什么这个 jQuery 不起作用？ [复制]
【发布时间】：2014-10-25 22:43:50
【问题描述】：

我拼凑了以下 jQuery 来制作手风琴效果。这行得通...

$("#FAQs .answer").hide();
$("#FAQs .close").hide();
$("#FAQs .open").show();

// Click the #Expand button to show and hide .answer
$('#Expand').click(function() {

if ($(this).text() === 'Minimise FAQs') {
    $(this).text('Expand FAQs');
    $('#FAQs .answer').slideUp('fast');
    $("#FAQs .close").hide();
    $("#FAQs .open").show();

} else {
    $(this).text('Minimise FAQs');
    $('#FAQs .answer').slideDown('fast');
    $("#FAQs .close").show();
    $("#FAQs .open").hide();

}
});

// Click the Quesiton (h2) to show and hide the answer
$("#FAQs h2").addClass("link").click(function() {
$(this).parent().children(".answer").slideToggle('fast');
$(this).parent('li').children(".close").toggle();
$(this).parent('li').children(".open").toggle();
});

这段代码（上面）使以下 HTML 打开和关闭页面上的所有手风琴：

<section class="row m_b_zero">
<div class="inner-container">
    <div class="box">
        <div class="box-inner"> <div class="faq-controls">
            <span id="Expand">Expand FAQs</span>
        </div></div>
    </div>
</div>
</section>

这仍然很有效。

但是。

我需要使用 jQuery 将该 HTML 注入到页面中，所以我将它拼凑在一起：

$(function() {
$( 'section:nth-child(2)' ).after( '<section class="row m_b_zero"><div class="inner-        container"><div class="box"><div class="box-inner"><div class="faq-controls"><span id="Expand">Expand FAQs</span></div></div></div></div></section>' );
});

这会在第二个 <section> 标记之后注入与之前相同的手风琴控制器 HTML。

这几乎行得通。

HTML 已按预期注入，但按钮不起作用？它不会打开和关闭手风琴。

我已经确保这个 jQuery 被放置在控制手风琴的 jQuery 之后，并且它位于页面就绪函数中。

有人知道为什么它不起作用吗？

【问题讨论】：

您需要使用$().on() 将事件附加到动态添加的元素上

标签： javascript jquery html jquery-ui

【解决方案1】：

您将相同的id 分配给两个不同的元素。当您在 jQuery 中使用 id 选择器时，它只返回带有 id 的第一个元素。您应该改用类：

//HTML
<span class="Expand">Expand FAQs</span>

//JS
$('.Expand').click(function() {

另外，如果您将它们动态添加到页面中，您应该考虑event delegation：

$(document).on("click", '.Expand', function() {

【讨论】：

感谢您的推动！明天早上我会看看这个。

【解决方案2】：

一个文档中的多个元素不能有相同的 id（这是无效的）。您应该改用类名。
您应该为动态添加的元素委派事件处理程序。假设您使用Expand 类，您可以使用on() 来委派事件处理程序，如下所示：
```
$(document).on("click",".Expand", function() {
   // code
});
```

document 仅用于演示目的，最好使用最近的静态祖先

【讨论】：

谢谢，看起来 on() 是要走的路。