jQuery .on（）方法未检测到未来元素

Question

我正在尝试使用jQuery来根据之前选择的下拉列表填充一个下拉列表，如下所示：

这适用于第一个行，但是我使用WordPress的Gravity Forms插件让我添加后续行。我的jQuery脚本似乎被加载页面后添加的任何下拉列表完全忽略。

以下是我使用该方法的方法：

$('#form-register .gfield_list tr td:first select').on('change', function() {
    var fieldBrand = $(this).parent().next().find('select');
    alert('1');

“1”仅在第一行的选择字段中提醒，而不是其他字段。

您可以在此处查看网页（包含完整的jQuery脚本）： - http://www.mattpealing-server.co.uk/~devappli/register/

谁能看到我做错了什么？我在Firefox的错误控制台中看到没有错误。

此外，我对应用于+/-图标的工具提示也存在同样的问题，这些并不重要，但我想问题的原因是一样的。

Answer 1

on仅在使用事件委派时影响将来的元素。你应该阅读delegation section of the documentation。假设#form-register永远不会通过ajax加载。

，这样的事情就可以了

$('#form-register').on('change', '.gfield_list tr td:first select', function() {

Answer 2

这不是你应该如何使用委托事件。您需要为将来的元素提供选择器。

假设在绑定时存在#form-register，请尝试使用此

$('#form-register').on('change', '.gfield_list tr td:first select', function() { 
... 
})

#form-register可以被绑定时存在的任何容器替换，您应该尝试选择层次结构中最接近的容器。

Answer 3

感谢。

我最后修复了它，但是： $(document).on('change','#form-register .gfield_list tr td:first-child select', function() {