从动态创建的HTML代码中未调用函数

Question

我正在使用JavaScript更改HTML代码，并希望从创建的“div”中调用相同的函数，但是未被调用。如您所见，在函数调用后形成的“html”也具有class =“screen”，但创建的“div”不支持它。

var i;
var clear = 2;
$("#container").click(function() {
  var clickid = $(this).attr('id');
  var left = document.getElementById(clickid).offsetLeft;
  var top = document.getElementById(clickid).offsetTop;
  var height = document.getElementById(clickid).offsetHeight;
  var width = document.getElementById(clickid).offsetWidth;
  var x = document.getElementById(clickid).value;
  orient = prompt("vertical or horizontal ?");
  numdiv = prompt("How many divisions should be created ?");
  var divsper = [];
  var html = "";
  for (i = 0; i < numdiv; i++) {
    per = prompt("Percentage of " + (i + 1) + "th division ?");
    divsper.push(per);
  }
  if (orient == "vertical") {
    for (i = 0; i < numdiv; i++) {
      l = Math.floor(left + ((i * divsper[i] * width) / 100));
      w = Math.floor((divsper[i] * width) / 100);
      html = html + "<div id=" + clickid + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
    }
    document.getElementById(clickid).outerHTML = html;
    //document.getElementById(clickid).unwrap();
  }

});

* {
  padding: 0px;
  margin: 0px;
}

body {}

#container {
  background-color: pink;
  top=0%;
  left=0%;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>

- Vishal Gupta

---

请看 我被告知要使用“Stack Snippets”创建可运行示例，该怎么做？-Meta Stack Overflow，其中介绍了如何正确使用Stack Snippets。 - Andreas

Id必须是唯一的。 - Andreas

同时，使用.click无法与新创建的元素一起工作。请使用jQuery的.on()方法来绑定事件。 - Nandita Sharma

@Andreas，是的，我会用类名来做。 - Vishal Gupta

Answer 1

将"$("#container").click(function() {"这一行替换为"$("html").on('click', '[id*=container]', function() {"。这样做对你有帮助。

var i;
var clear = 2;
$("html").on('click', '[id*=container]', function() {
  var clickid = $(this).attr('id');
  var left = this.offsetLeft;
  var top = this.offsetTop;
  var height = this.offsetHeight;
  var width = this.offsetWidth;
  var x = this.value;
  orient = prompt("vertical or horizontal ?");
  numdiv = prompt("How many divisions should be created ?");
  var divsper = [];
  var html = "";
  for (i = 0; i < numdiv; i++) {
    per = prompt("Percentage of " + (i + 1) + "th division ?");
    divsper.push(per);
  }
  if (orient == "vertical") {
    for (i = 0; i < numdiv; i++) {
      l = Math.floor(left + ((i * divsper[i] * width) / 100));
      w = Math.floor((divsper[i] * width) / 100);
      html = html + "<div id=" + clickid + (i + 1) + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
    }
    this.outerHTML = html;
    //this.unwrap();
  }

});

* {
  padding: 0px;
  margin: 0px;
}

body {}

#container {
  background-color: pink;
  top=0%;
  left=0%;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>

- Karan

---

它可以工作。但是我想在我点击的<div>上进行拆分。现在它正在第一个获得ID的div上发生。 - Vishal Gupta

所有新创建的div都将具有class = screen和id为container1，container2，container11等。 - Vishal Gupta

Answer 2

尝试使用$('#container').on('click')代替。动态生成的HTML事件处理略有不同。

- Squiggs.