Нужен лучший способ добавить большой кусок кода

Question

По какой-то причине этот код перестает работать после его добавления. Я планирую добавить еще больше к этому огромному беспорядку читаемого человеком кода ячменя. Если бы кто-то мог объяснить мне, почему этот код не работает, и как я могу лучше добавить это, это было бы здорово. Это для расширения хром, где этот код внедряется в веб-сайт, поэтому его необходимо добавить в существующий. Часть кода, который не работает для меня, - это функция, которая должна скрывать и показывать div в главном меню.

$(function() { 
 
\t var startmenuicon = $('#topCenter'); 
 
\t $(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() { 
 
\t 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>') 
 
\t 
 
\t $('#du').click(function() { 
 
\t \t var mainwindow = $('body'); 
 
\t \t $(mainwindow).append(maindiv); 
 
\t \t $(maindiv).draggable({containment: 'body', scroll: false }).resizable({minWidth: 412, minHeight: 418, containment: 'body'}); 
 
\t }); 
 

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

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>