按钮点击事件监听器只调用一次

Question

我有一个包含多个按钮的类，用户可以从中选择一个数字，但是在点击侦听器触发一次后，它不再被调用。代码笔 ( https://codepen.io/jasonws/pen/qBZeMMB ) 是一个显着简化的版本，它仍然显示问题。任何人都可以看看这个并让我知道我做错了什么吗？谢谢！

class Utilities {

    selectedSession = "Second";

    constructor () {

        const self = this;

        this.manage();

        $("button").on("click", function(e) {

            self.message("Button click: switching to " + this.value + ".");

            self.selectedSession = this.value;

            self.manage();

        });

    }

    manage() {

        const self = this;

        const sessions = [ "First", "Second", "Third", "Fourth", "Fifth" ]

        var code;

        $("#picker").empty();

        this.message("Manage: " + this.selectedSession + " is selected.");

        sessions.forEach(function(entry) {

            code = "<button type='button' value = '" + entry + "'";

            if (entry == self.selectedSession) { code += " style='background-color: gray;'"}

            code += ">" + entry + "</button>";

            $("#picker").append(code);

        });

        $("#content").text($("#picker")[0].outerHTML);

    }

    message(text) {

      if ($("#messages").text() != "") { $("#messages").append("<br>"); }

      $("#messages").append(text);

    }

}

test = new Utilities();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="picker"></div>

    <textarea id="content" rows="10" cols="50"></textarea>

    <div id="messages"></div>

Answer 1

这是因为您在每次单击时重新创建按钮 HTML 内容，这会删除所有附加的事件侦听器。您可以在单击后重新附加它们，或者通过修改现有元素来代替 HTML 内容调整按钮状态。这是工作版本class Utilities {selectedSession = "Second";constructor () {&nbsp; &nbsp; const self = this;&nbsp; &nbsp; this.init();&nbsp; &nbsp; this.manage();&nbsp; &nbsp; $("button").on("click", function(e) {&nbsp; &nbsp; &nbsp; &nbsp; self.message("Button click: switching to " + this.value + ".");&nbsp; &nbsp; &nbsp; &nbsp; self.selectedSession = this.value;&nbsp; &nbsp; &nbsp; &nbsp; self.manage();&nbsp; &nbsp; });}manage(){&nbsp; &nbsp; this.message("Manage: " + this.selectedSession + " is selected.");&nbsp; &nbsp; var buttons = $("button")&nbsp; &nbsp; for(var x = 0; x < buttons.length; x++){&nbsp; &nbsp; &nbsp; var button = buttons[x]&nbsp; &nbsp; &nbsp; if(button.value === this.selectedSession){&nbsp; &nbsp; &nbsp; &nbsp; button.style.backgroundColor = "gray"&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; button.style.backgroundColor = ""&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}init() {&nbsp; &nbsp; const self = this;&nbsp; &nbsp; const sessions = [ "First", "Second", "Third", "Fourth", "Fifth" ]&nbsp; &nbsp; var code;&nbsp; &nbsp; $("#picker").empty();&nbsp; &nbsp; sessions.forEach(function(entry) {&nbsp; &nbsp; &nbsp; &nbsp; var buttonHtml = `<button type='button' value='${entry}' >${entry}</button>`&nbsp; &nbsp; &nbsp; &nbsp; $("#picker").append(buttonHtml);&nbsp; &nbsp; });&nbsp; &nbsp; $("#content").text($("#picker")[0].outerHTML);}message(text) {&nbsp; if ($("#messages").text() != "") { $("#messages").append("<br>"); }&nbsp; $("#messages").append(text);}}test = new Utilities();