手风琴+附加内容Jquery

Question

所以我有一个我用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>

Answer 1

你必须在动态创建的内容上使用.live（'click'...）。

Answer 2

默认情况下，将事件绑定到元素只会影响绑定运行时存在的节点。 通过使用事件委派，您可以利用事件冒泡的内置方式。 jQuery <1.7使用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。