Javascript 在我的网页上附加div之后如何初始化jquery插件？

我正在我的网页上使用jquery mmenu。本页上使用了两种不同的菜单。一个用于桌面，另一个用于移动设备。我不想复制这一页上的菜单。如何在append元素之后调用runjquerymmenu。下面我添加了我的代码

<header class="clearfix">
        <a href="#mobile_menu">Menu</a>
        <!-- For desktop -->
        <div class="fR">
            <nav id="mainNav" class="fL">
                <ul class="clearfix">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a>
                        <ul class="clearfix">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </nav>
        </div>
        <!-- For mobile-->
        <div id="mobile_menu"></div>
    </header>

jquery

这里我使用了jquery mmenu URL：

---

只是一个问题，是否可以只使用1菜单，并使用媒体查询在移动和桌面上设置不同菜单的样式？不。但是，我想使用mmenu插件。因为我需要在我的页面上添加5个子菜单。

$(function() {
    $('body').wrapInner('<div id="main-container" />');
    $('#mainNav ul').clone().appendTo($('div#mobile_menu'));
    $('div#mobile_menu').mmenu();
});

Initalize jquery under

$( document ).ready( function() {


}
option because it load after page ready 
like 

$(document).ready( function() {

  $('body').wrapInner('<div id="main-container" />');
  $('#mainNav ul').clone().appendTo($('div#mobile_menu'));
  $('div#mobile_menu').mmenu();

}