jQuery - привязка к элементам, которые еще не созданы

Question

[Не дублируется] - Я проверил вопрос Event binding on dynamically created elements?, и его ответ на самом деле является начальной точкой моего вопроса. Я начинаю с $ parent.on ('click', '.specificChild' ... и т. Д.). Я уже это знаю (см. Его для wrapper1). Первая часть моего вопроса не имеет ничего общего с упомянутым вопросом SO.

---

В родительском элементе, я хочу, чтобы создать дочерний элемент, а затем внучатые дочерние элементы, и есть событие щелчка на внучатом дочерний элементе.

Возможно ли предварительно определить дочерний элемент, а также предварительно определить событие click, даже до создания элементов child/grand-child?

// 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);

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

Более конкретно, вопрос:

1. Как я могу определить $foundation до его создания? т.е. перед этой линией $wrapper2.html('<div class="foundation"></div>')?
2. Как я могу привязать функцию click к incrementButton в пределах wrapper2, еще до создания элемента incrementButton?

Answer 1

Чтобы связать событие для будущих элементов, которые я использую:

$ (документ) .он ('щелчок', '.wrapper2 .incrementButton' .....

В прошлом версии JQuery вы может использовать живой метод.

Ваш раздел для создания wrapper2 нужно немного rearrangemnet.

Использование добавить вместо методов HTML.

Нет, вы не можете выполнить:

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

до создания элементов с классом «.foundation».

Мое предложение:

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

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