2

我认为问题与操作 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.

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

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

此语句在所有选项卡上都可以完美运行，除了动态创建的选项卡。

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

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

编辑

第一个片段发生在 change() 触发器上。第二个在没有触发器的情况下发生，但在代码中稍后编写。相关的？

4

3 回答 3

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但您正在注册changedom 准备好的事件处理程序。

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

于 2013-06-09T02:25:35.123 回答
0

Tom Pietrosanti 在评论中是正确的。执行顺序是这里的问题。由于第一个片段上的 change() 直到其余部分已经加载后才执行：第二个 each()。

我会使用 .on() - 很好的解决方案，但 1.7+ 不是一个选择，不要问为什么。

我所要做的就是在一个方便地放置在附近的点击事件上添加每个。

这是一个很难记住的概念，因为有人来自服务器端语言 -代码顺序不一定与执行顺序相同

对不起，没有jsfiddle大家，下一次。:)

非常感谢大家的时间，很多很好的答案！

于 2013-06-09T02:45:05.257 回答
0

这只是一个猜测，但我认为 .each 函数在生成选项卡之前正在分析 DOM。您可能希望根据整个选项卡容器内部的内容在输入本身上设置一个侦听器，而不是在事后搜索每个内容以进行更改？同样，由于信息有限，这只是一个疯狂的猜测……此语句应密切关注主选项卡容器的任何更改，即使在 DOM 加载后创建的输入中也能捕捉到更改……

$("#above_tabs_container").on("change","input[data-item=specialvalue]",function() {
   // do some function stuff
});

可能值得一试，我将 $.on 用于大量动态加载的东西，只要你观察加载时 DOM 中的容器，它似乎就能捕捉到它...... http://api.jquery.com /上/

于 2013-06-09T02:26:03.993 回答