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内容来调整按钮状态。

这是工作版本

#Data
df <- structure(list(Ca1 = c("ca", "cb", "ca", "cd", "ce"), Cre = c("h1", 
"h2", "h3", "h4", "h5")), row.names = c("1", "2", "3", "4", "5"
), class = "data.frame")

按钮单击事件侦听器仅被调用一次

1 个答案: