函数无法从动态创建的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>

Answer 1

替换＆＃39; $（＆＃34;＃container＆＃34;）。点击（功能（）{＆＃39;此行与＆＃39; $（＆＃34; html＆＃34;）。 on（＆＃39; click＆＃39;，＆＃39; [id * = container]＆＃39;，function（）{＆＃39;。 它会对你有用。

＆＃13;

＆＃13;

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

});

＆＃13;

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

body {}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用$（＆＃39;＃container＆＃39;）。（＆＃39;点击＆＃39;）代替。动态生成的html事件处理略有不同。