需要一种更好的方法来附加大量代码

Question

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

$(function() {
	var startmenuicon = $('#topCenter');
	$(startmenuicon).prepend('<img id="du" src="https://cdn4.iconfinder.com/data/icons/BRILLIANT/food/png/400/beer.png" title="Click me!" />');
});

$(function () {
$('#mainul a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.maine div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.maine div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});

$(function () {
	var maindiv = $('<div id="main-menu"><button id="close" style="font-weight: bold; font-size: 18px; cursor: pointer;  cursor: hand;" onclick="$(this).parent().hide();">X</button><div id="navigation"><nav><ul id="mainul"><li><a href="#">Options</a><span class="dropBottom"></span><ul><li><a href="#" id="link1">Change bg img</a></li><li><a href="#" id="link2">Shot Counter</a></li><li><a href="#" id="link3">Shot Timer</a></li><li><a href="#" id="link4">Embed </a></li><li><a href="#" id="link5">About</a></li><li><a href="#" id="link6">Contact</a></li></ul></ul></nav><div class="maine"><div id="page1" class="content"><h1>Page 1</h1><p>First Section of content.</p></div><div id="page2" class="content"><h1>Page 2</h1><p>Second section of content</p></div><div id="page3" class="content"><h1>Page 3</h1><p>Third section of content</p></div><div id="page4" class="content"><h1>Page 4</h1><p>Fourth section of content</p></div><div id="page5" class="content"><h1>Page 5</h1><p>Fifth section of content</p></div><div id="page6" class="content"><h1>Page 6</h1><p>Six section of content</p></div></div></div>')
	
	$('#du').click(function() {
		var mainwindow = $('body');
		$(mainwindow).append(maindiv);
		$(maindiv).draggable({containment: 'body', scroll: false }).resizable({minWidth: 412, minHeight: 418, containment: 'body'});
	});

	$('#du').click(function() {
		$(maindiv).show();
	});
});

Answer 1

您使用了多个 $(function(){}); 我尝试重新组织事物，还使用 ​​事件委托 来定位“尚不存在”的元素 (#mainul a)，如下所示：

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

试试看：

$(function() {
  var startmenuicon = $('#topCenter');
  $(startmenuicon).prepend('<img id="du" src="https://cdn4.iconfinder.com/data/icons/BRILLIANT/food/png/400/beer.png" title="Click me!" />');

  var maindiv = $('<div id="main-menu"><button id="close" style="font-weight: bold; font-size: 18px; cursor: pointer;  cursor: hand;" onclick="$(this).parent().hide();">X</button><div id="navigation"><nav><ul id="mainul"><li><a href="#">Options</a><span class="dropBottom"></span><ul><li><a href="#" id="link1">Change bg img</a></li><li><a href="#" id="link2">Shot Counter</a></li><li><a href="#" id="link3">Shot Timer</a></li><li><a href="#" id="link4">Embed </a></li><li><a href="#" id="link5">About</a></li><li><a href="#" id="link6">Contact</a></li></ul></ul></nav><div class="maine"><div id="page1" class="content"><h1>Page 1</h1><p>First Section of content.</p></div><div id="page2" class="content"><h1>Page 2</h1><p>Second section of content</p></div><div id="page3" class="content"><h1>Page 3</h1><p>Third section of content</p></div><div id="page4" class="content"><h1>Page 4</h1><p>Fourth section of content</p></div><div id="page5" class="content"><h1>Page 5</h1><p>Fifth section of content</p></div><div id="page6" class="content"><h1>Page 6</h1><p>Six section of content</p></div></div></div>');

  $('body').on('click', '#mainul a', function(e) {
    hideContentDivs();
    var tmp_div = $(e.currentTarget).parent().index();
    console.log($(e.target));
    $('.maine div').eq(tmp_div).show();
    e.preventDefault();
  });

  function hideContentDivs() {
    $('.maine div').hide();
  }
  
  hideContentDivs();
  
  $('#du').click(function() {
    var mainwindow = $('body');
    $(mainwindow).append(maindiv);
    $(maindiv).draggable({
      containment: 'body',
      scroll: false
    }).resizable({
      minWidth: 412,
      minHeight: 418,
      containment: 'body'
    });
    $(maindiv).show();
  });
});

#topCenter {
    width: 30%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}
#main-menu {
    background: rgba(255, 255, 255, .9);
    margin-top: -120px;
    font-size: 12px;
}
#mainul li {
    display: inline;
    margin-right: 1em;
}
img {
  height: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="topCenter"></div>