Question

我正在研究一个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并删除一些看似无关的插件。当我删除其中一个，一个intellitext工具，代码开始在所有浏览器中正常工作。我已经完成了测试，甚至能够将代码推回到document.ready，所以我想我会将其标记为已回答，并将其归结为插件兼容性问题/错误。

再次感谢大家

Answer 1

如何使用以下内容？

$(this).live ("change", function() {
    //...
});

Answer 2

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

此外，您已使用if ($(this).val() == "1")，因此，如果一个值更改为1，另一个值也更改为0。因此，这两个更改实际上首先显示然后隐藏，这使得看起来没有事件被触发。

Answer 3

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

Jquery绑定似乎失败了

3 个答案: