jquery在动态创建的div中选择动态类id

Question

我有一些动态创建新div（表单内部的输入）的JS。它工作得很好。我还有一些jquery，它检查下拉输入，如果单击特定的选择，它会显示一个单独的div。它工作得很好。

如果我试图使用jquery在一个动态创建的div中显示一个单独的div，那么它将不起作用。它的第一个实例确实有效，但动态创建的实例都无效。在四处搜索之后，看起来我需要一个代表团，但我似乎无法针对我的具体情况找到它。

JSFIDLE：http://jsfiddle.net/Xyzeg/（更改第一个字段中的“CPI”下拉列表，使事件熄灭）。fiddle包含用于动态创建div的其他JS。

任何建议都将不胜感激。

<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

必须将事件绑定到父元素，然后向下过滤到所需的元素。这样，无论何时添加元素，它都会一直工作。这就是所谓的授权。将处理事件的任务委托给另一个元素。

$(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 2

你可以用

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

最好使用父div，而不是文档。

更新：当事件注册时，动态注入到DOM的元素不存在，因此新元素不会触发事件。使用事件委托，（在父元素上注册事件）可以解决这个问题，因为当任何元素触发事件时，事件会冒泡到它可以找到的最后一个元素（向上），这样父元素被触发，但在幕后，类似跟随的事情正在发生

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

你可以检查这个。

Answer 3

您需要委托新创建的元素！

换行

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

到

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