Question

由于某些原因，此代码一旦附加就会停止工作。我计划在这大量的大麦人类可读代码中添加更多内容。如果有人可以向我解释为什么这段代码不起作用，以及如何更好地追加这个代码那将是很好的。这是针对chrome扩展，其中此代码将自身注入到网站中，因此需要将其附加到存在。代码中不适合我的部分是应该隐藏并在主菜单div中显示div的函数。

＆＃13;

$(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();
	});
});

＆＃13;

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>

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

1 个答案: