Question

I’m currently trying to add this fun little crawling fly script to my website, and want to customize it so that you can kill it when it’s clicked. The script automatically places the image right above the tag, and I can’t seem to get my jQuery .click function below it.

This is the script that I put in the head (sorry it’s minified, but the unminified version doesn’t work for some reason)

/* WWW: http://screen-bug.googlecode.com/git/index.html Released under WTFPL license.     */
(function () {
    function y() {
        0 >= --s && t();
        if (!j) {
            var b;
            if (b = 0 >= --u) d = 0, 50 > a.top ? d |= 1 : a.top > document.documentElement.clientHeight - 50 && (d |= 2), 50 > a.left ? d |= 4 : a.left > document.documentElement.clientWidth - 50 && (d |= 8), b = d;
            if (b && (c %= 360, 0 > c && (c += 360), 15 < g(q[d] - c))) {
                b = q[d] - c;
                var k = 360 - c + q[d];
                f = g(b) < g(k) ? b : k;
                u = 10;
                l = 100;
                m = 30
            }
            0 >= --l && (f = e(1, 150), l = h(40 * Math.random()));
            if (0 >= --m) c += e(1, 10), m = h(10 * Math.random());
            else {
                b = e(1, 5);
                if (0 < f && 0 > b || 0 > f && 0 < b) b = -b;
                f -= b;
                c += b
            }
            r = c * v;
            b = 2 * Math.cos(r);
            k = 2 * -Math.sin(r);
            a.style.top = (a.top += k) + "px";
            a.style.left = (a.left += b) + "px";
            n("rotate(" + (90 - c) + "deg)")
        }
    }
    function e(b, a) {
        var c = h(b + Math.random() * a);
        return 0.5 < Math.random() ? c : -c
    }
    function t() {
        j = !j;
        s = e(50, 300);
        j ? (a.src = "https://screen-bug.googlecode.com/git/fruitfly.png", a.id = "bedbug", document.addEventListener ? document.addEventListener("mousemove", p, !1) : document.attachEvent && document.attachEvent("onmousemove", p)) : (a.src = "https://screen-bug.googlecode.com/git/fruitfly.png", w())
    }
    function w() {
        document.removeEventListener ? document.removeEventListener("mousemove", p, !1) : document.detachEvent && document.detachEvent("onmousemove", p)
    }
    function p(b) {
        b = b || window.event;
        b.clientX ? (posx = b.clientX, posy = b.clientY) : b.pageX && (posx = b.pageX - (document.body.scrollLeft + document.documentElement.scrollLeft), posy = b.pageY - (document.body.scrollTop + document.documentElement.scrollTop));
        40 > g(a.top - posy) + g(a.left - posx) && (t(), w())
    }
    var c = 90,
        r = c * v,
        f = 0,
        q = {
            1: 270,
            2: 90,
            4: 0,
            8: 180,
            5: 315,
            9: 225,
            6: 45,
            10: 135
        }, d = 0,
        u = 10,
        m = 0,
        l = 0,
        s = 50 * Math.random(),
        j = !1,
        a = null,
        n = void 0,
        x = {
            Moz: function (b) {
                a.style.MozTransform = b
            },
            Webkit: function (b) {
                a.style.WebkitTransform = b
            },
            O: function (b) {
                a.style.OTransform = b
            },
            Ms: function (b) {
                a.style.msTransform = b
            },
            Khtml: function (b) {
                a.style.KhtmlTransform = b
            },
            w3c: function (b) {
                a.style.transform = b
            }
        }, h = Math.round,
        g = Math.abs,
        v = Math.PI / 180;
    setTimeout(function () {
        a = document.createElement("img");
        a.src = "https://screen-bug.googlecode.com/git/fruitfly.png";
        (new Image).src = "https://screen-bug.googlecode.com/git/fruitfly.png";
        a.style.position = "fixed";
        a.style.zIndex = "99";
        a.top = e(50, document.documentElement.clientHeight - 50);
        a.top = 0 < a.top ? a.top : -a.top;
        a.left = e(50, document.documentElement.clientWidth - 50);
        a.left = 0 < a.left ? a.left : -a.left;
        a.style.top = a.top + "px";
        a.style.left = a.left + "px";
        document.body.appendChild(a);
        m = h(10 * Math.random());
        l = h(40 * Math.random());
        "transform" in a.style && (n = x.w3c);
        var b = ["Moz", "Webkit", "O", "Ms", "Khtml"];
        for (i in b) if (b[i] + "Transform" in a.style) {
            n = x[b[i]];
            break
        }
        c = e(0, 360);
        n && setInterval(y, 100)
    }, 2E3)
})();

And I want to put this below it:

<script type="text/javascript">
$("#bedbug").click(function() {
  alert("ARGHHH!!!!");
});
</script>

Eventually once it works, I’m going to have the click function do a lot more, but I just need to get it working first.

Thanks to all in advance, I appreciate all the assistance you guys (and gals) provide. Cheers!

Answer 1

It is not loaded when you try to reference it. Use on() to your advantage

$(document).on("click", "#bedbug", function() {
  alert("ARGHHH!!!!");
});