jQuery - binding to elements that are not yet created -

[not duplicate] - checked event binding on dynamically created elements? question, , answer start point of question. start off $parent.on('click', '.specificchild' ... etc.). know (see wrapper1). first part of question has nothing referenced question.

---

within parent element, want create child element , grand-child elements, , have click event on grand-child element.

is possible pre-define child element , pre-define click event, before child/grand-child elements created ?

// wrapper1 related -- works  var $wrapper1 = $('.wrapper1');  var $number1 = $wrapper1.find('.number');  $wrapper1.on('click', '.incrementbutton', function () {      var currentval = parseint($number1.html(), 10);      $number1.html(currentval + 1);  });      // wrapper2 related - doesn't work  // define elements upfront  var $wrapper2 = $('.wrapper2');  var $foundation = $wrapper2.find('.foundation');  var $number2 = $wrapper2.find('.number');  $wrapper2.on('click', '.incrementbutton', function () {      var currentval = parseint($number2.html(), 10);      $number2.html(currentval + 1);  });      $wrapper2.html('<div class="foundation"></div>');  var htmlcontent = '' +          '<div class="arithmetic">' +          '    <div class="number">1</div>' +          '    <div class="incrementbutton">+ 1</div>' +          '</div>';  $foundation.html(htmlcontent);

.wrapper1, .wrapper2 {      background-color: #e8eaf6;      padding: 1em;      width: 12em;;      margin: 1em;  }  .foundation {      background-color: #9fa8da;      padding: 1em;  }  .arithmetic {      background-color: #5c6bc0;      padding: 1em;      overflow: hidden;  }  .number {      width: 1.5em;      height: 1.5em;      text-align: center;      line-height: 1.5;      background-color: white;      float: left;      color: #3949ab;      margin-right: 1em;  }  .incrementbutton {      overflow: hidden;      height: 1.5em;      line-height: 1.5;      text-align: center;      background-color: #3949ab;      border: 1px solid white;      color: #e8eaf6;  }  .incrementbutton:hover {      cursor: pointer;      background-color: #283593;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="wrapper1">    <div class="foundation">      <div class="arithmetic">        <div class="number">1</div>        <div class="incrementbutton">+ 1</div>      </div>    </div>  </div>    <div class="wrapper2"></div>

more specifically, question is:

1. how can define $foundation before creation ? i.e. before line $wrapper2.html('<div class="foundation"></div>') ?
2. how can bind click function incrementbutton within wrapper2, before creation of incrementbutton element ?

to bind event future elements use:

$(document).on('click', '.wrapper2 .incrementbutton'.....

in past jquery version use live method.

your section create wrapper2 needed little rearrangemnet.

use append instead of html methods.

no, cannot execute:

var $foundation = $wrapper2.find('.foundation');

before elements class '.foundation' created.

my proposal is:

$(function() {    // wrapper1 related -- works    var $wrapper1 = $('.wrapper1');    var $number1 = $wrapper1.find('.number');    $wrapper1.on('click', '.incrementbutton', function () {      var currentval = parseint($number1.html(), 10);      $number1.html(currentval + 1);    });        var $wrapper2 = $('.wrapper2');      $wrapper2.append('<div class="foundation"></div>');      var $foundation = $wrapper2.find('.foundation');    var htmlcontent = '' +        '<div class="arithmetic">' +        '    <div class="number">1</div>' +        '    <div class="incrementbutton">+ 1</div>' +        '</div>';    $foundation.append(htmlcontent);      var $number2 = $wrapper2.find('.number');    $(document).on('click', '.wrapper2 .incrementbutton', function () {      var currentval = parseint($number2.html(), 10);      $number2.html(currentval + 1);    });  });

.wrapper1, .wrapper2 {    background-color: #e8eaf6;    padding: 1em;    width: 12em;;    margin: 1em;  }  .foundation {    background-color: #9fa8da;    padding: 1em;  }  .arithmetic {    background-color: #5c6bc0;    padding: 1em;    overflow: hidden;  }  .number {    width: 1.5em;    height: 1.5em;    text-align: center;    line-height: 1.5;    background-color: white;    float: left;    color: #3949ab;    margin-right: 1em;  }  .incrementbutton {    overflow: hidden;    height: 1.5em;    line-height: 1.5;    text-align: center;    background-color: #3949ab;    border: 1px solid white;    color: #e8eaf6;  }  .incrementbutton:hover {    cursor: pointer;    background-color: #283593;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <div class="wrapper1">      <div class="foundation">          <div class="arithmetic">              <div class="number">1</div>              <div class="incrementbutton">+ 1</div>          </div>      </div>  </div>    <div class="wrapper2"></div>