Jquery 我无法在窗口加载调整大小功能中动态添加内容

但是load resize函数中的相同代码不能正常工作

$(window).on('load resize', function(){

$('div').wrapAll('<div class="cc" />');
$('.cc div').wrap('<div class="group" />');

var groupLength = $('.cc .group').length;
    var groups = $('.cc .group');
    if(groupLength == 2){
        groups.css('width','50%');
    } else if(groupLength == 3){
        groups.css('width','33.33%');
    } else {
        groups.css('width','10%');
    }
});

$（窗口）.on（'load resize'，function（））{
$（'div'）.wrapAll（''）；
$（'.cc div'）.wrap（''）；
var groupLength=$（'.cc.group'）.length；
变量组=$（'.cc.group'）；
if（groupLength==2）{
css（'width'，'50%'）；
}else if（groupLength==3）{
css（'width'，'33.33%）；
}否则{
css（'width'，'10%'）；
}
});

---

---

调整大小时，您可能会说它正在工作。但很明显，它不是在负载下工作，为什么？因此，可能有一个很好的方法来处理这个问题？

这是因为默认情况下，小提琴会在window.load处理程序中添加脚本，因此在执行脚本时，window.load事件已经触发，因此处理程序将不会再次执行

在左侧面板的第二个下拉列表中，选择

No Wrap

$(window).on('load resize', function () {

    $('div').wrapAll('<div class="cc" />');
    $('.cc div').wrap('<div class="group" />');

    var groupLength = $('.cc .group').length;
    var groups = $('.cc .group');
    if (groupLength == 2) {
        groups.css('width', '50%');
    } else if (groupLength == 3) {
        groups.css('width', '33.33%');
    } else {
        groups.css('width', '10%');
    }
});

$（窗口）.on（'load resize'，函数（）{
$（'div'）.wrapAll（''）；
$（'.cc div'）.wrap（''）；
var groupLength=$（'.cc.group'）.length；
变量组=$（'.cc.group'）；
if（groupLength==2）{
css（'width'，'50%'）；
}else if（groupLength==3）{
css（'width'，'33.33%）；
}否则{
css（'width'，'10%'）；
}
});

演示：

---

window.load

事件不像

document.ready

处理程序那样工作，即使事件已经触发，它也会调用处理程序方法。

您可以在页面加载时触发

resize（）

，因为

jsFiddle

已将代码包装在

$（窗口）中。load（function（）{…}）默认情况下：

$(window).on('load resize', function(){

$('div').wrapAll('<div class="cc" />');
$('.cc div').wrap('<div class="group" />');

var groupLength = $('.cc .group').length;
    var groups = $('.cc .group');
    if(groupLength == 2){
        groups.css('width','50%');
    } else if(groupLength == 3){
        groups.css('width','33.33%');
    } else {
        groups.css('width','10%');
    }
}).resize(); // <-- Here

$（窗口）.on（'load resize'，function（））{
$（'div'）.wrapAll（''）；
$（'.cc div'）.wrap（''）；
var groupLength=$（'.cc.group'）.length；
变量组=$（'.cc.group'）；
if（groupLength==2）{
css（'width'，'50%'）；
}else if（groupLength==3）{
css（'width'，'33.33%）；
}否则{
css（'width'，'10%'）；
}
}).resize（）；//无需手动触发事件。。。只需使用左侧的第二个下拉菜单更改包装器panel@ArunPJohny我能为我的网站做些什么？这不是fiddle的问题？@C-link您是否将代码放在了另一个包装函数中？如果是，请删除it@C-链接有助于它的帮助：-也可以考虑使用<代码>开关>代码>而不是<代码>。你可以参考这里的方法：@ArunPJohny我正在使用外部js文件。