Function not get called from dynamically created html code

Question

I'am changing the html code from javascript and want to call same function from created "div"s. but it is not called.

As you can see 'html' which is formed after function invoke also has class="screen" but created 'div's doesn't support it.

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>

Have a look at I've been told to create a "runnable" example with "Stack Snippets", how do I do that? - Meta Stack Overflow which explains how to properly use Stack Snippets. — Andreas
– Andreas, Commented Jun 9, 2018 at 6:43
also .click wont work with newly created elements. use .on() method of jquery to bind events — Nandita Sharma
– Nandita Sharma, Commented Jun 9, 2018 at 7:17

Karan · Accepted Answer · 2018-06-09 16:10:06Z

1

Replace '$("#container").click(function() {' this line with '$("html").on('click', '[id*=container]', function() {'. It will work for you.

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>

edited Jun 9, 2018 at 16:10

answered Jun 9, 2018 at 7:24

Karan

12.7k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vishal Gupta Over a year ago

It worked. But I want the split to be happen on the <div> which I clicked. well here its happening on the first div it gets with the ID.

Vishal Gupta Over a year ago

all newly created div's will have class=screen and id's as container1,container2,container11,.. etc

Squiggs. · Accepted Answer · 2018-06-09 07:18:41Z

0

Try using $('#container').on('click') instead. Dynamically generated html event handling is slightly different.

answered Jun 9, 2018 at 7:18

Squiggs.

4,5028 gold badges56 silver badges94 bronze badges

Collectives™ on Stack Overflow

Function not get called from dynamically created html code

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related