使用.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() { 

如果可能的话，使用的元件相比更靠近所述主体元件的元件，使得它必须尽可能少地检查事件。