Аккордеон + прилагаемая Jquery Content

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 («нажмите кнопку» ... на динамически созданный контент

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.