通过ajax刷新div后，事件监听器不再起作用

Question

这是重新加载按钮，它浮动在页面底部，它不包含在div＃main-content中，点击后会刷新：

<div id="reload-maincontent" data-action="rdm01">
    <button class="hellofresh hellofresh--darkred--shadowed--floating rd2" type="button">
        <div class="c-ripple js-ripple">
            <span class="c-ripple__circle"></span>
        </div>
        <span id="reloadMaincontent-innertext" style="font-weight:500;"></span>
    </button>
</div>

以下脚本将触发#main-content：

的div重新加载

$(document).on("click", '#reload-maincontent', reloadMaincontentCollectorsPage);
function reloadMaincontentCollectorsPage() {
    var reloadContent = location.href + " #main--content";

    $("#main--content").css( "opacity","0" );
    setTimeout(function() {
        $("#main--content").load(reloadContent)
        .css( "opacity","1" );
    }, 600);
    $(this).removeClass('toggleInfo');
};

如果我单击按钮重新加载div，它可以正常工作，但刷新的div中的事件监听器不再工作。在单击按钮后刷新div：

<div id="main--content">

    <div class="a-can lt rd10 ovhid">
        <div class="tools">
            <div id="add-cans" data-catid="..." class="ac-option">
                <p>
                    <i class="material-icons md-18">add</i> add a can
                </p>
            </div>
            <div class="bg-img"></div>
        </div>
    </div>

    ...

</div>

这种结构有很多，它们显示的是来自数据库的不同图片。当我点击＃add-cans div时，以下脚本应该启动，但在刷新后它不再起作用了：

$(document).on('click', '[data-catid]', getCanaddInformation);
function getCanaddInformation() {
    var catid = $(this).data("catid");
    var catName = $(this).data("cadd-catname");
    var catCount = $(this).data("cadd-currcans");

    $('#get-catname-uploader').text(catName);
    $('#addcan-catid').val(catid);
}

脚本包含在jQuery下的head标记中。