Question

So I have an accordion menu that I created with 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>

Now, I want to be able to dynamically append extra accordion items to the accordion box, which I have done like this:

<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>

This works perfect, except the dynamically generated items don’t collaps when you click on the collapse button. The existing accordion items still work. For some reason it seems like Jquery wont trigger for dynamically created links. Any ideas how I can correct this?

BTW, here is the basic HTML structure:

<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

You have to use .live(‘click’… on dynamically created content.