Как убрать лишние клики из работы скрипта?

Question

[EvgenyApMr]

Здравствуйте!

Есть скрипт, задача которого добавлять и убирать класс от элемента. Всё работает до тех пора, пока AJAX-ом не обновится список элементов.

$('.more_info').click(function() {
  $(this).parent().find('.product-details').toggleClass('visible');
});

Почти решил эту проблему повесив на кнопку тег onclick и обернув скрипт в функцию

function more_info(){

$('.more_info').click(function() {
  $(this).parent().find('.product-details').toggleClass('visible');
});
}

Скрипт начал перезапускаться по клику, но теперь приходится все делать в 2 клика: 1 клик - запуск функции, 2 клик - выполнение скрипта. При этом, начинать работу скрипта после обновления получается только с 3-го клика.

Вопрос: как можно поправить скрипт, чтобы .toggleClass('visible'); срабатывал всегда по первому клику на кнопку?

Comments

[Петр]

Вещайте событие изначально на родительский элемент, что не будет обновляться
Пример: $('body').click('.more_info', function() { ... })

[EvgenyApMr]

Петр, спасибо, проблема с двумя кликами ушла, но появилась новая.

$('body').click('.more_info', function() { $(this).parent().find('.product-details').toggleClass('visible'); })

Присваивает класс ко всем элементам, а должен только тому, с которым у кнопки общий родитель. Не видит this или что-то вроде того

Answer 1

[v3shin]

$(document).on('click', '.more_info', function() {
    $(this).parent().find('.product-details').toggleClass('visible');
});

Предполагается такой вид верстки:

<tag>
    <tag class="more_info"></tag>
    <tag class="product-details"></tag>
</tag>

Comments

[EvgenyApMr]

Проблема решена! Большое спасибо!)