Question

使用JavaScript / jQuery时遇到一些问题。

我们目前正在使用＆＃34;短代码＆＃34;从Visual Composer（WordPress插件）创建（水平）选项卡。我们进行了一些自定义更改，但只能直观地进行（images / css）。

我们正在尝试制作它，以便在您点击标签时自动向下滚动到内容。

我已尝试在

中包装脚本

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

还尝试用 .load（）

替换 .ready（）

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中的控制台，它将按预期工作，基于我说它自己运行的脚本，感觉就像它＆＃ 39;没有加载或注册或没有。

我们是否有任何（明显的）问题/错误？

我很乐意在必要时提供其他信息（例如网站地址）

非常感谢任何帮助！

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 () {});
});

<强>更新

发表评论后，我可以看到.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 () {});
  });
});

JavaScript滚动到锚点

1 个答案: