Question

我有一些JS动态创建一个新的div（表单内部的输入）。它很棒。我单独有一些jquery检查下拉输入，如果单击特定选项则显示一个单独的div。它很棒。

如果我尝试使用jquery在其中一个动态创建的div中显示一个单独的div，它就不起作用。它的第一个实例确实有效，但没有动态创建的实例。在搜索之后，看起来我需要一个代表团，但我似乎无法弄清楚我的具体情况。

JSFiddle：http://jsfiddle.net/Xyzeg/（更改第一个字段中的“CPI”下拉列表，以便事件结束）。小提琴包括用于动态创建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

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

更改此行

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

到

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

Answer 2

您可以使用

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

Answer 3

您必须将事件绑定到父元素，然后向下过滤到所需的元素。这样，添加元素时无关紧要，它始终有效。这称为委托。您将处理事件的任务委托给另一个元素。

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

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

3 个答案: