使用.on（）與動態創建的HTML元素配合使用

Question

我在jQuery中的.on()方法中遇到了一些麻煩。我試圖讓它開始檢查HTML頁面首次加載時不存在的HTML元素的更改。不幸的是，我無法在Google或Stack Overflow上找到這樣的例子。

這是我的情況：我在HTML中有一些下拉菜單和一些文本框，並且只在從下拉菜單（'其他'選項）選擇特定選項時才顯示文本框。

我有這個工作很好，使用.on('change')與顯示或隱藏文本框的功能。該代碼看起來是這樣的：

$(document).ready(function(){ 
$("#partialOther_1").hide(); //textbox id = partialOther_1 
$("#partial_1").on('change', function() { //dropdown id = partial_1 
    var partVar1 = $(this).val(); 
    if(partVar1 > 0) { 
    $("#partialOther_1").show(); 
    } 
    else { 
    $("#partialOther_1").hide(); 
    } 
}); 

的問題是，我要完成同樣的事情再下拉/文本框對，只有選擇從第一個下拉菜單的東西出現在HTML。我正在嘗試下面的代碼，但我認爲問題在於第二個條件。當腳本運行時，它的計算結果爲false，我不確定重新檢查條件的最佳方法，並讓.on()方法繼續「監聽」，如果它是真的。如果可能的話，我寧願不使用setInterval()。

$(document).ready(function(){ 
    var partVar2 = 0 
    $("#partial_1").on('change', function() { 
    var partVar2 = $(this).val(); 
    if(partVar2 > 0) { 
     $("#brokerOther_1").hide(); 
     } 
    }); 
    if(partVar2>0) { //'broker' only exists in HTML if partial_1 >0 
    $("#broker").on('change', function() { 
    var brokerVar = $(this).val(); 
    if(brokerVar == 4) { 
     $("#brokerOther_1").show(); 
    } 
    else { 
     $("#brokerOther_1").hide(); 
    } 
    }); 
    } 
}); 

真的很感謝任何幫助！

Answer 1

要檢查的條件時，該事件被綁定，你應該當事件發生時，而不是檢查：

$("#broker").on('change', function() { 
    if (partVar2 > 0) { 
    var brokerVar = $(this).val(); 
    if(brokerVar == 4) { 
     $("#brokerOther_1").show(); 
    } else { 
     $("#brokerOther_1").hide(); 
    } 
    } 
}); 

如果元素不從開始存在，要使用一個委託，即結合事件的一些父元素確實存在，並使用第二選擇器，以指定要收聽來自事件：

$(document.body).on('change', "#broker", function() { 

如果可能的話，使用的元件相比更靠近所述主體元件的元件，使得它必須儘可能少地檢查事件。