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

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 () {

    const self = this;

    this.init();

    this.manage();

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

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

        self.selectedSession = this.value;

        self.manage();

    });

}

manage(){

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

    var buttons = $("button")

    for(var x = 0; x < buttons.length; x++){

      var button = buttons[x]

      if(button.value === this.selectedSession){

        button.style.backgroundColor = "gray"

      } else {

        button.style.backgroundColor = ""

      }

    }

}

init() {

    const self = this;

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

    var code;

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

    sessions.forEach(function(entry) {

        var buttonHtml = `<button type='button' value='${entry}' >${entry}</button>`

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

    });

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

}

message(text) {

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

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

}

}

test = new Utilities();