Question

我正在进行编码练习，我已经完成了它并试图玩一下。

这是我的html：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
    <h1>Test</h1>
    <script src="jquery.js"></script>
    <script src="test.js"></script>
    <script>
        function runAfter() {
            alert("HI!");
            var p = document.createElement("p");
            p.id = "msg";
            p.innerHTML = "TEST!";
            document.body.innerHTML += "<br />";    
            document.body.appendChild(p);
            console.log(p.innerHTML);
        };
        //window.onload=runAfter;
    </script>
</body>
</html>

和js文件：

"use strict";


var Widget = {
    init: function Widget(width, height) {
        this.width = width || 50;
        this.height = height || 50;
        this.$elem = null;
    },
    render: function ($where) {
        if (this.$elem) {
            this.$elem.css({
                width: this.width + "px",
                height: this.height + "px"
            }).appendTo($where);
        }
    }
};

var Button = Object.create(Widget);

Button.config = function config(width, height, label) {
    this.init(width, height);
    this.label = label || "ClickMe";
    this.$elem = $("<button>").text(this.label);
};

Button.build = function ($where) {
    this.render($where);
    this.$elem.click(this.onClick.bind(this));
};

Button.onClick = function (evt) {
    console.log("Button '" + this.label + "' clicked!");
    this.updateMessage("Button '" + this.label + "' clicked!");
};

Button.updateMessage = function (msg) {
    var p = document.getElementById("msg");
    p.innerHTML = msg;
};

function run() {
    let $body = $(document.body);
    //create
    let btn1 = Object.create(Button);
    let btn2 = Object.create(Button);

    //initialize
    btn1.config(125, 30, "Hello");
    btn2.config(150, 40, "World");

    //build
    btn1.build($body);
    btn2.build($body);
};

$(document).ready(run);

如果您在html中保留//window.onload=runAfter;，则可以在控制台中看到来自Button.onClick函数的问题。但是console.log可以提供

"Button '" + this.label + "' clicked!"

但是如果你取消注释，那个功能就不起作用了。

出了什么问题？动态这种约束是否超出范围到其他地方？

runAfter()将元素附加到test.js动态生成的html页面。

应该发生的情况是，这两个按钮应按预期工作，console.log和<p>段与id=msg打印出与console.log相同的

Answer 1

如果你注释掉它就有用了

document.body.innerHTML += "<br/>";

并将其替换为

document.body.appendChild(document.createElement("br"));

编辑说明：

当您使用document.body.innerHTML + =时，您正在将innerHTML作为字符串，添加到该字符串，然后用新字符串替换整个innerHTML。因此，您不会添加已经存在的内容（appendChild（）的方式），您将删除所有内容并替换它。

当您删除按钮时，附加到它们的点击处理程序将消失。替换innerHTML后，脚本不再运行，因此点击处理程序永远不会重新附加。

按钮中onClick绑定的正确方法

1 个答案: