правильный способ для привязки привязки к кнопке

Я работаю над упражнением по кодированию, и я покончил с этим и попытался немного поиграть.правильный способ для привязки привязки к кнопке

Это 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);

, если вы оставите //window.onload=runAfter; как в HTML, вы можете увидеть проблему в консоли, которая исходит от Button.onClick. Но консоль.log работает, давая

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

Но если вы раскомментируете его, эта функция не работает.

Что происходит не так? Является ли динамическое это обязательство выходящим из сферы действия в другое место?

runAfter() добавляет элементы к динамически сгенерированной странице html из test.js.

Что должно случиться, две кнопки должны работать, как ожидается, с console.log и <p> пункт с id=msg распечатывания такой же, как console.log

источник

2015-07-09 user2290820

Это работает, если вы закомментировать

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

и заменить его

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

Редактировать с объяснением:

Что происходит, когда вы используете document.body.innerHTML + =, вы берете innerHTML как строку, добавляя к этой строке, а затем заменяя весь innerHTML на новую строку. Таким образом, вы не добавляете к тому, что уже существует (способ, которым работает appendChild()), вы удаляете все его и заменяете.

Когда вы удаляете кнопки, прикрепленные к ним обработчики кликов исчезли. И скрипты не запускаются снова после замены innerHTML, поэтому обработчики кликов никогда не присоединяются.

источник

2015-07-17 15:06:44 ak2ln

большое спасибо за указание это. плохой вернуться к вам, если это сработает для меня – user2290820

очень приятное объяснение. я думал, что он работает, как i = i +2, как правило, это так. – user2290820

Ну, он работает одинаково, но i + = 2, по существу, var x = i + 2; я = х; в том, что он просто перезаписывает значение i, на самом деле не добавляет его. – ak2ln

правильный способ для привязки привязки к кнопке

ответ

Смежные вопросы