jquery在動態創建的div中選擇動態類ID

我有一些JS動態創建一個新的div（在表單內輸入）。它效果很好。我分別有一些檢查下拉輸入的jquery，並且如果單擊特定的選擇，則顯示單獨的div。它效果很好。jquery在動態創建的div中選擇動態類ID

如果我嘗試使用jquery在其中一個動態創建的內部顯示單獨的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>

來源

2013-07-16 bo_knows

您必須將事件委託給事件綁定時存在的元素。 – Mathletics

要擴展@Mathletics評論，請查看jQuery.on。 '$（document）.on（'change'，'[class * = pensionAdjustment]「，function（）{...' – dinjas

所以，你說因爲動態創建的div在搜索之前不存在，我不能像我這樣綁定事件嗎？那麼解決方法是什麼？ –

您需要委託新創建的元素！

改變這一行

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

到

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

來源

2013-07-16 18:23:42

我還不能完全接受答案（太早，太新的用戶），但是這樣做的確有用，你能解釋一下這裏發生了什麼嗎？一點點？所以我可以真正瞭解其中的差異 –

@bo_knows很酷，沒問題，其中一個習慣於jQuery的東西，將解決很多新手錯誤！ –

$（document）.on部分正在分配未來創建內容的代表團？ –

您必須將事件綁定到父元素，然後過濾到您想要的。這樣，添加元素時無關緊要，它始終可以工作。這就是所謂的代表團。您將處理事件的任務委託給另一個元素。

$(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-16 18:23:38

您可以使用

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

來源

2013-07-16 18:24:07

@InGodITrust，是的，我回復了你的評論，它似乎「似乎與你相似:-)」。 –

@InGodITrust，現在你不要:-) –

@InGodITrust，哈哈，但他在正確的平臺上，我很快就會知道他會學習它，因爲我認爲，這比獲得代表更多的是學習的地方，所有的專家在這裏回答，不是嗎？ –

jquery在動態創建的div中選擇動態類ID

回答

相關問題