Javascript 需要更好的方法来追加大量代码吗

由于某些原因，此代码在附加后即停止工作。我计划在这堆乱七八糟的人类可读代码中添加更多内容。如果有人能向我解释为什么这段代码不起作用，以及我如何更好地附加这段代码，那就太好了。这是一个chrome扩展，该代码将自身注入到网站中，因此需要将其追加才能存在。代码中对我不起作用的部分是应该隐藏和显示主菜单div中的div的函数

$（函数（）{
var startmenuicon=$（“#topCenter”）；
$（startmenuicon）.prepend（“”）；
});
$（函数（）{
$（'mainul a'）。单击（函数（e）{
hideContentDivs（）；
var tmp_div=$（this.parent（）.index（）；
$（'.maine div'）.eq（tmp_div）.show（）；
});
函数hideContentDivs（）{
$（'.maine div'）。每个（函数（）{
$（this.hide（）；}）；
}
hideContentDivs（）；
});
$（函数（）{
var maindiv=$（'X
第1页第一节内容。
第2页第二节内容
第3页第三节内容
第4页第四节内容
第5页第五节内容
第6页第六节内容
$（'#du'）。单击（函数（）{
var mainfown=$（'body'）；
$（主窗口）.append（maindiv）；
$（maindiv）.draggable（{containment:'body'，scroll:false}）.可调整大小（{minWidth:412，minHeight:418，containment:'body}）；
});
$（'#du'）。单击（函数（）{
$（maindiv.show（）；
});
});您正在使用多个
$（function（）{}）我尝试重新组织事情，还使用事件委派来针对“不存在的”元素（
#mainula
），如下所示：

$('body').on('click', '#mainul a', function(){});

试试看：


$（函数（）{
var startmenuicon=$（“#topCenter”）；
$（startmenuicon）.prepend（“”）；
var maindiv=$（'X
第1页第一节内容。第2页第二节内容
第3页第三节内容
第4页第四节内容
第5页第五节内容
第6页第六节内容
；
$（'body'）。在（'click'，'mainula'，函数（e）{
hideContentDivs（）；
var tmp_div=$（e.currentTarget）.parent（）.index（）；
log（$（e.target））；
$（'.maine div'）.eq（tmp_div）.show（）；
e、 预防默认值（）；
});
函数hideContentDivs（）{
$（'.maine div'）.hide（）；
}
hideContentDivs（）；
$（'#du'）。单击（函数（）{
var mainfown=$（'body'）；
$（主窗口）.append（maindiv）；
$（maindiv）.可拖动({
遏制:"身体",，
卷轴：假
}).可调整大小({
最小宽度：412，
身高：418，
遏制：“身体”
});
$（maindiv.show（）；
});
});
#topCenter{
宽度：30%；
保证金：0自动；
位置：相对位置；
z指数：0；
}
#主菜单{
背景：rgba（255,255,255,9）；
利润上限：-120px；
字体大小：12px；
}
#李梅努尔{
显示：内联；
右边距：1米；
}
img{
高度：120px；
}

我的意思是我需要将这个庞大的代码体（maindiv变量）动态添加到页面中。不幸的是，事实并非如此。代码中不适合我的部分不是可拖动的部分。这是假定显示和隐藏div的代码部分。我应该在我原来的帖子中详细说明这一点。