jQuery - 绑定到尚未创建的元素

Question

[不重复] - 我检查了Event binding on dynamically created elements?问题，其答案实际上是我问题的起点。我从$ parent.on开始（＆＃39;点击＆＃39;，＆＃39; .specificChild＆＃39; ...等）。我已经知道了（见wrapper1）。我的问题的第一部分与引用的SO问题无关。

在父元素中，我想创建一个子元素，然后创建一个grand-child元素，并在grand-child元素上创建一个click事件。

是否可以预先定义子元素并预先定义click事件，甚至在创建子/ grand-child元素之前？

＆＃13;

＆＃13;

// wrapper1 related -- it 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 the 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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更具体地说，问题是：

1. 如何在$foundation创建之前定义它？即在此行之前$wrapper2.html('<div class="foundation"></div>')？
2. 即使在创建incrementButton元素之前，如何将点击功能绑定到wrapper2内的incrementButton？

Answer 1

要为将来使用的元素绑定事件：

$（文件）.on（＆＃39;点击＆＃39;，＆＃39; .wrapper2 .incrementButton＆＃39; .....

在过去的jQuery版本中，你可以使用live方法。

创建wrapper2的部分需要一些重新安排。

使用append而不是html方法。

不，你不能执行：

var $ foundation = $ wrapper2.find（＆＃39; .foundation＆＃39;）;

在具有类＆＃39; .foundation＆＃39;的元素之前已创建。

我的建议是：

＆＃13;

＆＃13;

$(function() {
  // wrapper1 related -- it 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);
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;