想知道为什么这个jQuery不起作用?

时间:2014-09-01 17:03:17

标签: javascript jquery html jquery-ui

我拼凑了以下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之后放置的,它位于页面就绪函数中。

任何人都知道为什么它不起作用?

2 个答案:

答案 0 :(得分:1)

您为两个不同的元素提供相同的id。在jQuery中使用id选择器时,它只返回带有id的第一个元素。你应该使用类来代替:

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

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

另外,如果您要将它们动态添加到页面中,则应考虑event delegation

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

答案 1 :(得分:0)

  • 文档中的多个元素不能具有相同的ID(它无效)。您应该使用类名。

  • 您应该为动态添加的元素委派事件处理程序。假设您正在使用类Expand,您可以使用on()委派事件处理程序,如下所示:

    $(document).on("click",".Expand", function() {
       // code
    });
    

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