jquery - 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 only affects future elements when event delegation is used. You should read the delegation section of the documentation. Something like this will work assuming #form-register is never loaded through ajax.

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

Answer 2

That's not how you are supposed to use delegated events. You need to provide a selector for future elements.

Assuming #form-register exist at bind time, try with this

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

#form-register can be replaced by any container that exist at bind time, you should try to pick the closest available in the hierarchy.

Answer 3

谢谢。

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