0

我目前正在研究一个给我带来很多麻烦的 jQuery 脚本。我不是该框架的专家，但我过去曾在许多场合成功地使用过它。

我正在尝试设置相当于子表单的子表单。即用户正在填写调查问卷，根据用户输入显示附加表单字段，在这种情况下，基于该输入可以显示更多字段。

因此，在这种情况下，我加载了一个脚本，该脚本搜索控制元素并将某些内容绑定到它们的更改事件。这种方法适用于第一个表单字段，但不适用于另一个。内容与 html 的其余部分一起加载，而不是通过 ajax。真正奇怪的部分是，使用调试器并观察控制台我可以看出下面的脚本正在寻找我想要的元素，并尝试调用 change()，但随后事件永远不会触发！

$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
    console.log("Hit");
    //alert($(this).prop('class'));
    $(this).on("change", function() {
        if ($(this).val() == "1") {
            $(this).parents('tbody').eq(0).children('tr.subFormRow').show();
            $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
        } else {
            $(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
            $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
        }
    });
});​

我一直在做一些试验和错误测试，但运气很少。如果我将它从被包装更改$(document).ready()为$(window).load()它可以在 FF 中工作，但不能在 IE 中工作。

有谁知道可能发生了什么？？？

编辑：感谢所有帮助！我正在使用的实现中有很多生成的 html，所以这里是我正在尝试使用的控件的父元素。让我知道是否有更多帮助！

<td class="subFormYesControl"><input type="radio" value="1" id="c1_CodebtorsParent[0]0" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]0">Yes</label><br><input type="radio" checked="checked" value="0" id="c1_CodebtorsParent[0]1" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]1">No</label><br></td>

编辑2：它似乎变得更加奇怪，但我想我找到了线索。如果我添加一个简单的警报，如下所示：

        alert($(this).prop('class'));
        $('td.subFormYesControl input.CodebtorParentQuestion').each(function() {


    $(this).on("change", function() {
        console.log($(this).length);
                    if($(this).val() == "1") {
                        $(this).parents('tbody').eq(0).children('tr.subFormRow').show();
                        $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
                    } else {
                        $(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
                        $(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
                    }                    
            });
        });

代码似乎有效！删除警报，它停止工作！！！有任何想法吗？？？？

谢谢大家的帮助。我正在准备 jsfiddle 并删除了一些看似无关的插件。当我删除其中一个智能文本工具时，代码开始在所有浏览器中运行良好。我已经通过测试，甚至能够将代码推回 document.ready，所以我想我会将其标记为已回答并将其归结为插件兼容性问题/错误。

再次感谢大家

4

3 回答 3

0

如何使用以下内容？

$(this).live ("change", function() {
    //...
});
于 2012-04-16T19:24:39.230 回答
0

我已经测试了您的 HTML 示例和 jQuery 代码。有趣的是，您使用了两个无线电输入，这两个输入同时变化，或者其中任何一个随着另一个的变化而切换。很简单，如果您将一个值更改为 1，那么它会自动将另一个值更改为 0

if ($(this).val() == "1") 如果一个值更改为 1 而另一个值也更改为 0，那么您也使用过。因此，这两个更改实际上都是先显示然后隐藏，这使得似乎没有触发任何事件。

于 2012-04-16T19:55:10.230 回答
0

注释掉或删除该console.log()行。除非在运行脚本时打开开发人员工具，否则 IE 会卡住它。

于 2012-04-16T19:57:18.860 回答