Onclick After Effects動畫（bodymovin.js）ID沒有任何反應

Question

我在某些路徑上有一個具有ID的Aftermovie效果bodymovin.js SVG動畫（附加了圖像）。 我在上面放了一些css樣式（ cursor:pointer ），效果很好，但使用jquery onClick進行重定向似乎無效。 有什么想法嗎？

動畫本身位於疊加層中，該疊加層在按下按鈕后開始。

重定向代碼：

<script>
  $(function() {
        document.getElementById("replay").onclick = function () {
        location.href = "www.yoursite.com";
    };
    });
</script>

動畫代碼：

<script>
$( ".animation" ).click(function() {
    var anim;
    var elem = document.getElementById('bodymovin_overlay')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        rendererSettings: {
            progressiveLoad:false
        },
        path: 'data_overlay.json'
    };
    anim = bodymovin.loadAnimation(animData);
});
</script>

還附有圖片：

Answer 1

從document.getElementById（“＃replay”）中刪除＃。

使用document.getElementById（“ replay”）（本地JS）或通過jQuery $（'＃replay'）

Answer 2

我相信會發生此錯誤，因為您忘記添加分號。

var elem = document.getElementById('bodymovin_overlay')

至

var elem = document.getElementById('bodymovin_overlay');

Answer 3

問題已解決-覆蓋層覆蓋了動畫的z-index，因此必須為其提供比覆蓋層更高的z-index。

Answer 4

最終的代碼有效，希望它能對某人有所幫助：

    var lookingForLinks = true;
    setTimeout(addLinksToSvgAnim, 1000);

    function addLinksToSvgAnim() {
        if (lookingForLinks) {
            let medicalG = document.getElementById("medical");
            let foodG = document.getElementById("food");
            let collabG = document.getElementById("collab");
            let volunteersG = document.getElementById("volunteers");
            let projectsG = document.getElementById("projects");
            let replayG = document.getElementById("replay");

            if (medicalG && foodG && volunteersG && projectsG) {
                lookingForLinks = false;
                medicalG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/medical-aid";
                });
                foodG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/humanitarian-aid";
                });
                collabG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/our-story/partners";
                });
                volunteersG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/get-involved";
                });
                projectsG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
                replayG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
            }
            setTimeout(addLinksToSvgAnim, 1000);
        }
    }