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

Question

I have a class with several buttons from which the user can choose a number, but after the click listener fires once, it no longer gets called. The code pen ( https://codepen.io/jasonws/pen/qBZeMMB ) is a significantly simplified version which still displays the issue. Any chance someone could take a look at this and let me know what I'm doing wrong? Thanks!

 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

This is because you recreate the buttons HTML contents on each click which removes all attached event listeners. You can either reattach them after click, or instead of replacing HTML content adjust button state by modifying existing elements.

Here is working version

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