1

我有一些动态创建新 div 的 JS（表单内的输入）。它工作得很好。我分别有一些 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>
4

3 回答 3

3

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

更改此行

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

至

$(document).on('change',"[class*=pensionAdjustment]",  function() {
于 2013-07-16T18:23:42.310 回答
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;

你可以检查这个。

于 2013-07-16T18:24:07.497 回答
0

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

$(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');
    }
});
于 2013-07-16T18:23:38.043 回答