单击时出现 jQuery 错误 -> 未捕获的类型错误：无法读取未定义的属性“顶部”

Question

我不是 jQuery 专家，我想知道在单击简单表格中的 2 个图标时，我是否做错了什么会在 jQuery 中生成错误。具体来说，当我单击 pdf 图标或信封图标时，我在控制台中看到生成错误（每次单击 2 个图标之一时，数字都会增加）。另外，我为图标设置的链接不再有效。在右边你可以看到我有一个动画。这只是我停用的脚本代码，以查看是否是问题所在，但没有奏效。不幸的是，我正在为 CMS 使用一个插件，我无法更改它的代码。这是错误(index):62 Uncaught TypeError: Cannot read property 'top' of undefined    at HTMLTableElement.<anonymous> ((index):62)    at HTMLTableElement.dispatch (jquery-1.12.4.js:5226)    at HTMLTableElement.elemData.handle (jquery-1.12.4.js:4878)这是代码//your current click function$('.scroll').on('click',function(e){    e.preventDefault();    $('html,body').animate({        scrollTop:$($(this).attr('href')).offset().top + 'px'    },1000,'swing');});

Answer 1

您可以尝试为这两个图标的链接添加一个类，例如我添加 class="clickable"：

<a class="clickable" href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C16-0.2.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" height="20" width="auto"></a>

然后将其添加到您的 javascript 中：

$(".clickable, .clickable img").on('click', function(e){

   e.stopPropagation();

}

这样当您单击这两个链接时滚动 javascript 代码不会运行。

Answer 2

也许更改脚本：

//your current click function

$('.scroll').on('click',function(e){

    e.preventDefault();

    var href = $(this).attr('href'), $ele = $(href);

    if ($ele && $ele.offset()) {

      var top = $ele.offset().top + 'px'

      $('html,body').animate({

        scrollTop:top

      },1000,'swing');

    }   

});