多个$（文件）.ready（function（）但只有顶级夫妇正在开火

Question

问题：我如何确保所有$(document).ready件都运行而不仅仅是第一对？

我正在尝试使用外部.js文件根据是否选中框来更改表单上隐藏字段的值。现在我的.js文件看起来像这样：

$(document).ready(function() {
    $(function() {
        $('[name="c1"]').on('change', function() {
            $('[name="i1"]').val('Wargo');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('[name="c2"]').on('change', function() {
            $('[name="i2"]').val('Wargo');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('[name="c3"]').on('change', function() {
            $('[name="i3"]').val('Wargo');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('[name="c4"]').on('change', function() {
            $('[name="i4"]').val('Daily');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('[name="c5"]').on('change', function() {
            $('[name="i5"]').val('Daily');
        });
    });
});

.... (one of these for each variable)

我的桌子里面有复选框：

<input type="checkbox" id="c1" name="c1" value="17943"> <input type="hidden" name="i1" value="" /> ... (one of these for each box)

正在发生的事情是，这些就绪呼叫中的前3个将正常工作，然后检查其框时其他任何值都不会改变。 （我在Chrome上对它进行了测试。）我发现的帮助论坛表明它没有看到页面下方的那些，因为存在某种类型的错误，但是因为它们都是相同的功能我不确定如何确定错误可能是什么并纠正它。

那么 - 我如何确保所有$(document).ready件都运行而不仅仅是第一对？

到目前为止，我已经看到了一些使用$(document).live代替$(document).ready的建议，但是进行此更改不会影响最终结果。我也尝试将我的所有名称更改位代码组合成一组，就像我在几页上看到的那样，但是根本没有做任何事情，所以我回到了分离的函数。

我使用WordPress并且将.js代码放到页面上的唯一方法是从外部文件加载文件，因此在页面上移动代码并不是一个真正的选择超出一个非常宽的页眉或页脚选项（至少没有比我能在谷歌上找到的方向更好的方向）。现在，正在从WordPress上的header.php文件中调用.js文件。

Answer 1

我不确定您是否使用了多个document.ready来电，但如果可能的话，您应该将它们合并为一个：

$(function() {
    $('[name="c1"]').on('change', function() {
        $('[name="i1"]').val('Wargo');
    });
    $('[name="c2"]').on('change', function() {
        $('[name="i2"]').val('Wargo');
    });
    $('[name="c3"]').on('change', function() {
        $('[name="i3"]').val('Wargo');
    });
    $('[name="c4"]').on('change', function() {
        $('[name="i4"]').val('Daily');
    });
    $('[name="c5"]').on('change', function() {
        $('[name="i5"]').val('Daily');
    });
});

允许多个document.ready函数，理论上应该有效。这听起来像是一个错误可能会被抛出，这阻止了其他人被执行。将它们组合在一个函数中将为您提供全部或全部结果。

Answer 2

使用以下结构。将我们所有的事件放在一个文档就绪函数中。

$(document).ready(function() {

 $('[name="c1"]').on('change', function() {
        $('[name="i1"]').val('Wargo');
    });

 $('[name="c2"]').on('change', function() {
        $('[name="i2"]').val('Wargo');
    });

});

Answer 3

为什么不准备单个文件：

$(function() {
    $('[name="c1"]').on('change', function() {
        $('[name="i1"]').val('Wargo');
    });
    $('[name="c2"]').on('change', function() {
        $('[name="i2"]').val('Wargo');
    });
    $('[name="c3"]').on('change', function() {
        $('[name="i3"]').val('Wargo');
    });
    $('[name="c4"]').on('change', function() {
        $('[name="i4"]').val('Daily');
    });
    $('[name="c5"]').on('change', function() {
        $('[name="i5"]').val('Daily');
    });
});

Answer 4

好吧，看起来像杰森和蒂莫西是对的。当我开始挖掘HTML位时，它开始工作了。看起来当我复制和粘贴移动东西时，我没有完全删除一行代码而导致错误。这可能就是为什么当我在它仍然失败之前合并为一个函数时，我再次清理它，这次没有那些额外的代码挂出它工作正常。

感谢大家的帮助！

Answer 5

最好将所有代码放在单个文档中。否则你可以试试

 $(document).ready(function(e) {
        $('[name="c1"]').on('change', function() {
            $('[name="i1"]').val('Wargo');
        });
    });
    $(document).ready(function(f) {
        $('[name="c2"]').on('change', function() {
            $('[name="i2"]').val('Wargo');
        });
    });