更改了HTML,现在每个孩子输入都无法访问()

时间:2013-06-09 02:05:08

标签: jquery dynamic tabs each

我认为问题在操纵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()触发器上。第二种情况是在没有触发器的情况下发生,但在代码中稍后写入。相关?

3 个答案:

答案 0 :(得分: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事件处理程序。

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

答案 1 :(得分:0)

这只是猜测,但我认为.each函数在生成选项卡之前正在分析DOM。您可能希望根据整个选项卡容器内部的内容在输入上设置一个侦听器,而不是在事后进行更改后搜索每个选项卡?再次使用有限的信息,这只是一个疯狂的猜测...这个语句应该密切关注主标签容器的任何更改,并捕获更改,即使在DOM加载后创建的输入...

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

可能值得一试,我使用$ .on来获取大量的动态加载的内容,只要你在加载时看到DOM中的容器就可以捕获它...... http://api.jquery.com/on/ < / p>

答案 2 :(得分:0)

Tom Pietrosanti的评论是正确的。执行顺序是这里的问题。由于第一个片段的change()直到加载其余部分之后才执行:第二个()/。

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

我所要做的就是在点击活动中添加每个活动,这个活动很方便地放在附近。

这是一个难以理解的概念,因为某人来自服务器端语言 - 代码的顺序不一定与执行顺序相同

很抱歉没有jsfiddle大家,下次。 :)

非常感谢每个人的时间,有很多好的答案!