jquery выбор динамического идентификатора класса внутри динамически созданного div

Question

У меня есть JS, который динамически создает новый div (вход внутри формы). Он отлично работает. У меня отдельно есть некоторый jquery, который проверяет выпадающий ввод и показывает отдельный div, если щелкнуть конкретный выбор. Он отлично работает.

Если я пытаюсь использовать jquery, чтобы показать отдельный div внутри одного из динамически созданных, он не работает. Первый экземпляр его работает, но ни один из динамически не созданных. После поиска, похоже, мне нужна делегация, но я, похоже, не могу понять ее в моей конкретной ситуации.

JSFiddle: http://jsfiddle.net/Xyzeg/ (измените раскрывающийся список «CPI» в первом поле, чтобы событие исчезло). Сценарий включает в себя другой JS для динамического создания div.

Любые указатели будут оценены по достоинству.

<div style="float:left"> 
<div id='dynamicInput'>Pension 1: Amount: $<input type='text' name='adjustmentInputs[]' value='0' size='13' maxlength='20'>Start Year: 
<input type='text' name='adjustmentInputs[]' value='2032' size='5' maxlength='6'> 
<input type='hidden' name='adjustmentInputs[]' value='2100'> 
<select name='adjustmentInputs[]'> 
    <option value='InflationAdjusted'>Inflation Adjusted</option> 
    <option value='NotInflationAdjusted'>Not Inflation Adjusted</option> 
</select>by 
<select name='adjustmentInputs[]' class='pensionAdjustment1'> 
    <option value='CPI'>CPI</option> 
    <option value='constantPercentage'>Constant %</option> 
</select> 
<div id='constantPercentageText1' style='display: none'>@ <input type='text' name='adjustmentInputs[]' value='3' size='5' maxlength='6'>%</div> 
</div> 
    <input type="button" value="Add another Portfolio Adjustment" onClick="addInput('dynamicInput');"> 
</div> 
<script> 
$("[class*=pensionAdjustment]").change(function() { 
    var n = $(this).attr('class').replace('pensionAdjustment', ''); 
    var newId = "constantPercentageText" + n; 
    var selectedItem = $(this).children('option:selected'); 
    if ($(this).val() == 'constantPercentage') { 
     $("#constantPercentageText" + n).css('display', 'inline'); 
     $("#constantPercentageText" + n).show(); 
    } else { 
     $("#constantPercentageText" + n).css('display', 'none'); 
    } 
}); 
</script> 

Answer 1

Необходимо делегировать новые элементы!

Изменение этой линии

$("[class*=pensionAdjustment]").change(function() { 

в

$(document).on('change',"[class*=pensionAdjustment]", function() { 

Answer 2

Вы должны привязать событие к родительскому элементу, а затем отфильтровать его до нужного. Таким образом, не имеет значения, когда элемент добавлен, он всегда будет работать. Это называется делегированием. Вы делегируете задачу обработки события другому элементу.

$(document).on('change', "[class*=pensionAdjustment]", function(){ 
    var n = $(this).attr('class').replace('pensionAdjustment', ''); 
    var newId = "constantPercentageText" + n; 
    var selectedItem = $(this).children('option:selected'); 
    if ($(this).val() == 'constantPercentage') { 
     $("#constantPercentageText" + n).css('display', 'inline'); 
     $("#constantPercentageText" + n).show(); 
    } else { 
     $("#constantPercentageText" + n).css('display', 'none'); 
    } 
}); 

Answer 3

Вы можете использовать

$(document).on('change', '[class*=pensionAdjustment]', function(){ 
    // your code 
}); 

Было бы лучше, если вы используете родительский DIV вместо document.

Обновление: Элементы, которые вы вводите динамически в DOM, отсутствовали, когда событие было зарегистрировано, поэтому новые элементы не запускают событие. Используя event delegation, (регистрируя event на родительском элементе), это можно решить, потому что, когда какой-либо элемент запускает событие, событие пузырится до последнего элемента (вверх), который он может найти, и таким образом запускается родительский элемент, но за сцена, что-то вроде следующего происходит

e = e || window.event; 
var el = e.target || e.srcElement; 

You may check this.