JavaScript прокручивается до привязки

Question

Наличие некоторых проблем с JavaScript/jQuery.

В настоящее время мы используем «короткий код» из Visual Composer (плагин WordPress), который создает (горизонтальные) вкладки. Мы внесли некоторые пользовательские изменения, но только визуально (images/css).

Мы пытаемся сделать так, чтобы при нажатии на вкладку вы автоматически прокручиваете вниз до содержимого.

Я попытался обертывание сценарий в

jQuery(document).ready(function({}); 
jQuery(window).ready(function({}); 

, а также попытался заменить .ready() с .load()

jQuery(".pws_tabs_controlls_item").children().click(function(){ 
    jQuery('html, body').animate({ 
     scrollTop: jQuery(".ts-fancy-tabs-container").offset().top 
    }, 700, 'swing', function() {}); 
}); 

Однако! Если вы скопируете весь скрипт и вставьте его в Консоль в Chrome/Firefox, он будет работать так, как предполагалось, на основе того, что я бы сказал, что сам скрипт работает, похоже, что он не загружается и не регистрируется или не работает ,

Есть ли (очевидная) проблема/ошибка, которую мы создали?

Я был бы рад предоставить дополнительную информацию, если необходимому (например, адрес веб-сайта)

Любая помощь будет принята с благодарностью!

Answer 1

Плагин VisualComposer отображается только после того, как document готов, и именно поэтому он не работает.

Лучший способ решить проблему заключается в использовании jQuery's event delegation, например:

jQuery(document).on('click', '.pws_tabs_controlls_item > a', function() { 
    jQuery('html, body').animate({ 
     scrollTop: jQuery(".ts-fancy-tabs-container").offset().top 
    }, 700, 'swing', function() {}); 
}); 

---

UPDATE

После Вашего комментария, я могу видеть, что якорь метки внутри ваших .pws_tabs_controlls_item элементов уже есть прослушиватель событий click, и он также использует event.stopPropagation(), поэтому мой код выше никогда не будет выполнен.

Другой способ, чтобы решить вашу проблему, является загрязнен проверки когда элемент доступен, например:

function waitForAvailability(selector, callback) { 
    if (jQuery('selector').length === 0) { 
    callback(); 
    } 
    else { 
    setTimeout(function() { 
     waitForAvailability(selector, callback); 
    }, 0); 
    } 
} 

И потом, вы можете использовать код, который вы уже используете, что-то вроде этого :

waitForAvailability('.pws_tabs_controlls_item', function() { 
    jQuery(".pws_tabs_controlls_item").children().click(function(){ 
    jQuery('html, body').animate({ 
     scrollTop: jQuery(".ts-fancy-tabs-container").offset().top 
    }, 700, 'swing', function() {}); 
    }); 
});