Question

对于当前项目，我是以safari插件的形式将javascript注入网页。

一切正常，过程如下：

初始化单独的对象
加载页面
解析在需要时注入dom元素的页面
重新解析实时更新的间隔为1000毫秒

现在一切正常，我用一些按钮注入一个元素，它们工作正常。

现在页面有一些自己的javascript，它有一个自动更新功能。（实时更新）所以每秒都有一次轮询到服务器来获取要注入的新元素。

因此，实时更新脚本会添加新元素。

现在我的pageparser在实时更新脚本创建的新元素中注入了按钮元素。

按钮显示为等，但click eventlistener存在问题。它只是没有开火。

以下是我的代码的一部分：

class ViewManager {
    constructor() {
        this.databasemanager = databasemanager;

        this.injectAddons(this);
        setInterval(this.injectAddons, 1000, this);
    }

    injectAddons(self) {
        var karmaButtonImage = new Image('../img/karma.jpg');

        var post_elements = document.getElementsByClassName('post userid');

        for(var i=0; i<post_elements.length; i++) {
            self.createKarmaButton(post_elements[i], self);
        }
    }

    static changeBackgroundByKarma(element, karma) {
        var total_karma = karma.karma_up + karma.karma_down;
        if(total_karma > 0) {
            var karma_up_percentage = (karma.karma_up * 100) / total_karma;
            if(isNaN(karma_up_percentage)) {
                karma_up_percentage = 0;
            }

            if(karma_up_percentage < 50) {
                var normalized = (50 - karma_up_percentage) * 2;
                var a_value = parseFloat(normalized/100);
                element.style.backgroundColor = 'rgba(255, 0, 0, ' + a_value + ')';
            } else {
                var normalized = (karma_up_percentage - 50) * 2;
                var a_value = parseFloat(normalized/100);
                element.style.backgroundColor = 'rgba(0, 255, 0, ' + a_value + ')';
            }
        }
    }

    createKarmaButton(element, self) {
        var user_id = element.getAttribute('data-user');
        var post_id = element.getAttribute('data-postid');

        var post_space = element.getElementsByClassName('postholder_bot');

        var target = post_space[0];

        var fok_es_container = target.getElementsByClassName('fok_es_container');

        if(fok_es_container.length === 0) {
            var enhanced_div = document.createElement('div');
                enhanced_div.className = "fok_es_container";
                enhanced_div.position = 'absolute';
                enhanced_div.style.width = '180px';
                enhanced_div.style.height = '100px';
                enhanced_div.style.cssFloat = "left";

            target.insertBefore(enhanced_div, target.firstChild);

            var injectKarmaButtons = function(hasKarma) {
                if(!hasKarma) {
                    var karma_collector = document.createElement('div');

                    var karma_up_button = document.createElement('div');
                    karma_up_button.position = 'absolute';
                    karma_up_button.style.width = '25px';
                    karma_up_button.style.height = '25px';
                    karma_up_button.style.background = "green";
                    karma_up_button.style.border = "1px solid #000";

                    var karma_down_button = document.createElement('div');
                    karma_down_button.position = 'absolute';
                    karma_down_button.style.width = '25px';
                    karma_down_button.style.height = '25px';
                    karma_down_button.style.background = "red";
                    karma_down_button.style.border = "1px solid #000";

                    karma_collector.appendChild(karma_up_button);
                    karma_collector.appendChild(karma_down_button);

                    karma_up_button.addEventListener("click", self.karmaButtonUpPressed);
                    karma_down_button.addEventListener("click", self.karmaButtonDownPressed);

                    enhanced_div.appendChild(karma_collector);
                }
            };

            databasemanager.getKarma(user_id, function(karma) {
                ViewManager.changeBackgroundByKarma(enhanced_div, karma);
            });
            databasemanager.hasKarma(post_id, injectKarmaButtons);
        }
    }

    karmaButtonUpPressed(e) {
        var user_id = ViewManager.getUserId(e);
        var post_id = ViewManager.getPostId(e);

        var enhanced_div = e.target.parentNode.parentNode;

        ViewManager.removeElementAfterClick(e);

        databasemanager.addKarmaUp(user_id, post_id, function(karma) {
            ViewManager.changeBackgroundByKarma(enhanced_div, karma);
        });
    }

    karmaButtonDownPressed(e) {
        var user_id = ViewManager.getUserId(e);
        var post_id = ViewManager.getPostId(e);

        var enhanced_div = e.target.parentNode.parentNode;

        ViewManager.removeElementAfterClick(e);

        databasemanager.addKarmaDown(user_id, post_id, function(karma) {
            ViewManager.changeBackgroundByKarma(enhanced_div, karma);
        });
    }

    static getUserId(e) {
        return e.target.parentNode.parentNode.parentNode.parentNode.getAttribute('data-user');
    }

    static getPostId(e) {
        return e.target.parentNode.parentNode.parentNode.parentNode.getAttribute('data-postid');;
    }

    static removeElementAfterClick(e) {
        var target = e.target.parentNode;

        e.target.parentNode.remove(target);
    }
}

所以我猜测问题是什么。可能是DOM需要刷新吗？因为实时更新来自另一个域（原始域），而我的扩展名来自localhost。

以前是否有人遇到过这个问题？

编辑： self 变量是对ViewManager类实例的引用，它已定义并正在运行。函数karmaButtonUpPressed和karmaButtonDownPressed在对象实例上可用。

AddEventListener不会触发动态创建的元素

0 个答案: