Question

$(fnLoad('templates/cvTemplate1.html'));

function fnLoad(template) {
    $('#canvas-wrapper').show();
    $('#preview').load(template, function() {
        var nr = template[template.length-6];
        $('link[href^="css/previewTemplates"]').attr('href','css/previewTemplates/cvTemplate'+nr+'.css');
        $('input[name="mail"],input[name="num"],input[name^="eduFrom"],input[name^="workFrom"],input[name="olang"],input[name="ointerests"],input[name="odriverslicense"],input[name^="eduGpa"],input[name^="eduCom"],input[name^="workBulletPoint"]')
        .each(function() {
            var name = this.name;
            var id = this.name[0]; 
            var val = this.value;
            if( $(this).val() ) {
                var label;
                switch( name ) {
                    case 'mail':
                        label = 'E-mail:&nbsp;<p class="mail"></p>';
                    break;
                    case 'num':
                        label = 'Tel-nr:&nbsp;<p class="num"></p>';
                    break;
                    case 'olang':
                        label = '<b>Språk:</b>&nbsp;<p class="olang"></p>';
                    break;
                    case 'ointerests':
                        label = '<b>Intressen:</b>&nbsp;<p class="ointerests"></p>';
                    break;
                    case 'odriverslicense':
                        label = '<b>Körkort:</b>&nbsp;<p class="odriverslicense"></p>';
                    break;
                    case 'omisc':
                        label = '<b>Övrigt:</b>&nbsp;<p class="omisc"></p>';
                    break;
                    default:
                        if(name.indexOf('eduFrom')==0 || name.indexOf('workFrom')==0){
                            label = '<p class="'+name+'"></p>&nbsp;-';  
                        }
                        else {
                            label = '<ul><li class="'+name+'"></li></ul>';
                        }
                    break;
                }
                $('#'+name).html(label);
                $('#'+name+' > p.'+name+', li[class="'+name+'"]').text(val);                
            }
        });

        $('textarea, input:not([name="mail"],[name="num"],[name^="eduGpa"],[name^="eduCom"],[name^="eduFrom"],[name^="workBulletPoint"],[name^="workFrom"],[name="olang"],[name="ointerests"],[name="odriverslicense"],[name="omisc"])')
        .each(function() {
                var name=this.name;
                var val=$(this).val();
                $('#'+name).text(val);
        });

        $('input[name^="edu"],input[name^="work"],input[name^="o"]').each(function() {
            var name = this.name;
            var div = this.name.substr(0,3);
            var nr = this.name[this.name.length-1];
            var nDiv = div+nr;

            if( $(this).val() ) {
                $('#'+nDiv).css('padding-bottom','0.6em')               
            }
        });         

        $('input[name^="edu"],input[name^="work"],input[name^="o"]').each(function() {
            var id = this.name[0];
            if( $(this).val() ) {
                $('#'+id+'Heading').show();
            }
        });

    });

    $('#canvas-wrapper').delay(400).fadeOut('slow'); 
}

我正在使用load（），在文档就绪时，将一大块html代码加载到页面上的div中。不是必需的，只是一种整理代码的方法。在回调中，加载，我遍历一些输入，抓取值并将它们放在刚刚加载的html中。我还根据输入值在加载的内容上显示和隐藏一些div。在页面重新加载时完美无瑕地工作。

然后我使用相同的加载函数将html内容切换到另一个并执行相同的回调。这是它失败的地方。我正确加载，但回调函数无法正常工作。

当我切换内容时，事件处理程序似乎没有按预期做出反应。甚至那些分配了on（）。

有没有更好的方法来加载和切换页面上的html内容？我想避免页面重新加载。

这是一大堆代码，但如果你愿意，我会crtl-v。

使用load（）问题加载并将html内容切换到div

0 个答案: