Как получить доступ к идентификатору щелкнутого заголовка (h3) с помощью jQuery UI Accordion?

Question

The documentation for the jQuery UI accordion дает примеры нескольких вариантов комбинации h3 и div, которые становятся заголовком и содержимым для одной из кнопок аккордеона.

На моей странице у меня есть идентификаторы для каждого h3, и я хотел бы получить к ним доступ программно, когда кто-то нажимает одну из кнопок аккордеона. Самый очевидный подход, который я вижу, - зарегистрировать прослушиватель кликов на h3 и получить доступ к целевому объекту, чтобы вытащить HTML-код, возможно, после вызова аккордеона. Но я немного неясен, правильно ли это решение.

Что является предпочтительным способом использования обработчика событий, указывающего HTML-идентификатор h3, который использовался для создания кнопки аккордеона, которую пользователь нажал?

Answer 1

Это назначит переменной id щелкнутого элемента h3. Это также должно учитывать динамический контент, поскольку он использует on вместо click.

$("h3").on("click", function(){ 
    var id = $(this).attr("id"); 
}); 

Если это не работает, однако, для динамического контента, вы можете попробовать что-то вроде этого:

$("body").on("click", "h3", function(){ 
    var id = $(this).attr("id"); 
}); 

Answer 2

При создании аккордеона вы можете просто передать обработчик событий для Activate -мероприятие. Это событие активируется после активации панели (после завершения анимации). См http://api.jqueryui.com/accordion/

Вы могли бы сделать что-то вроде этого

$(".selector").accordion({ 
activate: function(event, ui) { 
if(!ui.newHeader.isEmptyObject()){ 
    alert(ui.newHeader.attr('id')) 
} 
} 
});