jquery - 更改了 HTML，现在在each() 中无法访问子输入

Question

我认为问题更根本的是操作 DOM，但不知道如何验证。

因此，我动态创建了选项卡，然后使用另一个静态选项卡 div 中的 HTML 添加了相应的 div HTML，如下所示，效果很好:

    $('#specific-tab').html($(this).closest('div').html() ); 
//where this is always one line away from closest('div') to copy from, promise.

然后，我有一个每个语句，它会遍历所有选项卡中的所有输入文本框:

$('#div-above-tabs input[data-item=specialvalue]').each(function() {
   $(this).change(function() {
    //do stuff
   });
});

此语句在除动态创建的选项卡之外的所有选项卡上都能完美运行。

我花了 8 个小时验证所有引用的属性、id、类，它们是完美的且具有唯一标识。

使用这些方法的 DOM 是否存在我不知道的行为？

编辑

第一个片段发生在change()触发器上。第二个发生时没有触发器，但在代码中写得很晚。相关吗？

Answer 1

问题是

$('#div-above-tabs input[data-item=specialvalue]').each(function() {
   $(this).change(function() {
    //do stuff
   });
});

应该是

$('#div-above-tabs').on('change', 'input[data-item=specialvalue]', function() {
    //do stuff
});

因为您有在 div-above-tabs 下动态创建的元素，但您正在 dom 上注册 change 事件处理程序。

在这种情况下，您需要使用上面给出的事件传播来使用委托(delegate)事件处理