Overriding/replacing一个jquery点击函数

Question

如果这是一个明显的问题，请原谅我。

我正在使用无法删除或更改的脚本处理页面。单击一个按钮，它使用 ajax 请求将一些项目加载到页面上，然后触发页面的烦人的滚动劫持动画。

目标：我仍然希望在单击按钮时加载项目，但我不想要滚动动画。

我可以将自己的自定义 js 添加到页面（在添加默认脚本的位置下方）。如何中断或覆盖原始脚本以消除滚动行为？

这是一个简化的例子。

.group{
 background: cyan;
 height:400px;
 width:400px;
 margin:10px
}
.load-more{
 background:#88f;
 width:360px;
 text-align:center;
 margin:10px;
 padding:20px;
  cursor:pointer;
}

<!-- markup -->
<div class="groups-listing">
 <div class="group"></div>
</div>
<div class="load-more">Load more</div>

<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 $(".load-more").click(function () {
  //loading another item
  $(".groups-listing").append('<div class="group"></div>');
  
  //annoying animated scrolling
  $("html, body").animate(
   {
    scrollTop: $(".groups-listing .group").last().offset().top
   },2000
  );
 });
</script>
<script>
  // custom js, override must go here.
</script>

实际问题可以在这里找到：https://obsu.unionclouduat.org/groups 我认为我的简化示例很相似，但我不是 100% 确定。

Answer 1

您可以尝试 unbind() 并重新分配活动 ?

// custom js, override must go here.

$(".load-more").unbind().click(function () {
        //loading another item
        $(".groups-listing").append('<div class="group"></div>');
});

Overriding/replacing一个jquery点击函数

Overriding/replacing a jquery click function

html

jquery

jquery-animate