JQuery Mobile Toggle-Switch in Listview

JQuery Mobile Toggle-Switch in Listview

I'm trying to build a mobile Webinterface with Jquery Mobile. I've got three questions:

  1. How can I set css tags for #List li a h2 and #List li a .ui-li-aside?
  2. How can I center the toggle switch on the right size?
  3. How can I call a different Function by Click on the Toggle Switch, than by a Click on the Listview-Element?

Since I'm new in Web Developing, it would be nice if someone of you can answer my questions.

This is my Source Code:

  1. <!DOCTYPE html> <html> <head> <meta name='viewport' charset='utf-8' content='width = device-width, initial-scale = 1'> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> #List li a h1 { font-size: 30px !important; }​ #List li a h2 { font-size: 30px !important; }​ #List li a .ui-li-aside { font-size: 30px !important; margin-top: 50px !important; }​ </style> </head> <body> <div data-role='page' id='first'> <div data-role='header' data-position='fixed' data-tap-toggle='false'> <h1>First Page</h1> </div> <div data-role='main' class='ui-content'> <ul data-inset='true' id='List' data-role="listview"> <li><a href='#'><h1>First</h1><h2>Second</h2><div class='ui-li-aside'><input data-role='flipswitch' type='checkbox'></div></a></li> </ul> </div> </body> </html> <script> $('#List').on('click','li', function(){ alert("Change "+this.id); }); $('#List').on( 'swipeleft swiperight','li', function() { alert("delete"); }); </script>