手风琴 + 附加内容 Jquery答案

【问题标题】：Accordion + Appended Content Jquery手风琴 + 附加内容 Jquery
【发布时间】：2012-05-26 03:40:29
【问题描述】：

所以我有一个使用 Jquery 创建的手风琴菜单：

    <script>
$(document).ready(function() {
/*Accordian Script for the Request New Appraisal Panel*/
$('.accordian_item').hide();
$('.accordian_item').first().slideDown();

$('.accordian_trigger').click(function(event) {
    event.preventDefault();
    $(this).parent().find('.accordian_item').slideToggle();
});
});
</script>

现在，我希望能够将额外的手风琴项动态附加到手风琴框，我已经这样做了：

<script>

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

    $('#accordion_container_box').append(large);


});
</script>

这很完美，除了当您单击折叠按钮时动态生成的项目不会折叠。现有的手风琴项目仍然有效。由于某种原因，Jquery 似乎不会触发动态创建的链接。有什么想法可以纠正这个问题吗？

顺便说一句，这是基本的 HTML 结构：

<div id="accordion_container_box">

            <div class="accordian_container">
                <a href="#" class="accordian_trigger"><h4>Borrower's Information</h4></a>
                <hr/>
                <div class="accordian_item">
                <label> First Name</label><br/>
                <input type="text"/><br/>
                <label>Middle Name</label><br/>
                <input type="text"/><br/>
                <label>Last Name</label><br/>
                <input type="text" /><br/>
                <label>Home Number</label><br/>
                <input type="text"/><br>
                <label>Work Number</label><br/>
                <input type="text"/><br>
                <label>Cell Number</label><br/>
                <input type="text"/><br>
                </div>
            </div>

            <div class="accordian_container">       
                <a href="#" class="accordian_trigger"><h4>Co-Borrower's Information</h4></a>
                <hr/>
                <div class="accordian_item">
                <label> First Name</label><br/>
                <input type="text"/><br/>
                <label>Middle Name</label><br/>
                <input type="text"/><br/>
                <label>Last Name</label><br/>
                <input type="text" /><br/>
                <label>Home Number</label><br/>
                <input type="text"/><br>
                <label>Work Number</label><br/>
                <input type="text"/><br>
                <label>Cell Number</label><br/>
                <input type="text"/><br>
                </div>
            </div>

        </div>

            <a href="#" id="add_contact_btn">+ Additional Contact</a>

【问题讨论】：

标签： javascript jquery html append accordion

【解决方案1】：

您必须在动态创建的内容上使用 .live('click'...。

【讨论】：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

【解决方案2】：

默认情况下，绑定到元素的事件只会影响绑定运行时存在的节点。通过使用事件委托，您可以利用事件冒泡的内置方式。 jQuery delegate 和 live 方法做到了这一点，jQuery 1.7 添加了 on 方法以将所有事件处理程序整合到一个 API 中。

例如，您可以使用以下内容来处理对具有accordian_trigger 类的节点的所有点击，无论它们是何时创建的。

$(document).on('click', '.accordian_trigger', function() {
    //whatever you need to do
});

这会将onclick 事件处理程序附加到document 本身。当 DOM 中发生任何点击时，它将从发生事件的节点冒泡到其父节点和父节点，直到到达 document。然后，jQuery 将检查事件是否发生在与作为on 的第二个参数传入的选择器匹配的节点上，在这种情况下，它将检查该节点是否具有accordian_trigger 的类。如果是，它将运行作为第三个参数传入的function。

为了提高效率，您可能希望将 document 替换为您知道将包含所有 accordian_trigger 节点的父节点。否则所有点击冒泡一直到document，并检查被点击的节点是否有accordian_trigger类，这可能很昂贵，特别是如果你有一个很大的DOM。

【讨论】：