仅在同一个div类上运行两个JavaScript函数

Question

我有一个带有类名称的div，以在发出Ajax请求时呈现部分内容。 这就是div的样子

<div class="main-section">

  {% partial "product-list"%}

</div>

现在我以这种方式分离了功能，以使用此更新div

<script type="text/javascript">

//Pagination part
    $('.main-section').on('click', '.pagination > li > a', function (event) {
    var page = $(this).text();
    event.preventDefault();
    if ($(this).attr('href') != '#') {
        $("html, body").animate({scrollTop: 0}, "slow");
        $.request('onNav', {
            data: {page: page},

        });
    }
});
</script>





<script type="text/javascript">

//Pagination part
    $('main-section').on('click', '.pagination > li > a', function (event) {
    var page = $(this).text();
    event.preventDefault();
    if ($(this).attr('href') != '#') {
        $("html, body").animate({scrollTop: 0}, "slow");
        $.request('onFilterProduct', {
            data: {page: page},

        });
    }
});
</script>

现在似乎有些冲突。它可以工作，但有时会显示未单击功能的分页结果。有没有一种方法可以将这两个功能结合起来，并且仅确保在单击时没有冲突就可以运行？