javascript - 手风琴 + 附加内容 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

By default binding events to elements will only affect nodes that exist at the time that the bind runs. By using event delegation you can make use of the built in way that events bubble. jQuery < 1.7 did this with the delegate and live methods, jQuery 1.7 added the on method to consolidate all the event handlers in a single API.

For example you could use the following to handle all clicks on nodes with a class of accordian_trigger regardless of when they were created.

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

What this will do is attach an onclick event handler to the document itself. When any click occurs in the DOM it will bubble up from the node that the event occurred on to its parent and its parent until it reaches the document. jQuery will then check whether the event occurred on a node that matches the selector passed in as the second parameter of on, in this case it will check whether the node has a class of accordian_trigger. If it does it will run the function passed in as the third parameter.

For efficiency's sake you'll likely want to replace document with a parent node that you know will contain all accordian_trigger nodes. Otherwise all clicks bubble all the way up to the document and check whether the node that was clicked on has the accordian_trigger class, which is potentially expensive, especially if you have a large DOM.