Untitled

<!DOCTYPE html>
<html>
  <head>
    <!-- Your other stuff  (you can have problems if you don't add minimum scale in the viewport) -->
    <meta name="viewport" content="width=device-width,minimum-scale=1" />
    <!-- Include a Sidr bundled CSS theme -->
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.dark.min.css">
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css">
    <style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }
}
</style>
  </head><body>
      <script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
      <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
    <!-- Include the Sidr JS -->
    <script src="http://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>


<div id="mobile-header">
    <a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>

<div id="navigation" style="display: none;">
    <nav id="navtag" class="nav">
<button id="menu" class="but" data-theme="a" title="test" data-role="button">Button</button>

</nav>
</div>
<script type="text/javascript">
//$(document).ready ( function () {
document.addEventListener('DOMContentLoaded', function() {
   // ...

         $( "#navigation " ).click(function()
        {
            alert( "Handler for .click() called." );
        });
        $('#responsive-menu-button').sidr(
        {
          name: 'sidr-main',
          source: '#navigation'
        });

        console.log($('#navigation >#navtag>#menu').prop('title'));
        $('#navigation >#navtag>#menu').click(function()
        {
            alert("H");
        });
//});
});
</script>
  </body>
</html>