jQuery Mobile CSS breaks button click events

233 views Asked by At

I am writing a mobile web-page using Clojure and jQuery mobile. Everything on the site works fine when I have the link for jquery mobile CSS commented out, but when I have this style sheet enabled, none of my buttons work and no errors are visible. I am sure I am missing something simple as this is the first mobile page I have written and I am new to web development.

<!DOCTYPE html>

<html>
<head>
  <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/> -->
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<!-- <body> -->
  <div data-role="page">
    <div data-role="header">
      <h1>Conwat's Game of Life</h1>
    </div>
    <div id="itr-div" height=100 width=100></div>
    <div data-role="content">
      <canvas data-role="canvas" id="surface" height=400 width=400>
      </canvas>
      <form id="options-form" name="options-form" enctype="multipart/form-data">
      <button data-role="button" type="button" class="button" id="pause-btn" value="Pause/Resume">
      </button>
      <button data-role="button" type="button" class="button" id="clear-btn" value="Clear">
      </button>
      <button data-role="button" type="button" class="button" id="heatmap-btn" value="Toggle Heatmap">
      </button>
        <!-- <input data-role="button" type="button" class="button" id="pause-btn" value="Pause/Resume">
      <input data-role="button" type="button" class="button" id="clear-btn" value="Clear">
      <input data-role="button" type="button" class="button" id="heatmap-btn" value="Toggle Heatmap"> -->

      </form>

<div data-role="footer">
  This is a footer
</div>
</html>

Clojure:

;onclick listeners
(set-onclick! (by-id "pause-btn") #(swap! paused not)
              (println "set on click pause called"))

(set-onclick! (by-id "heatmap-btn") #(swap! show-heatmap not)
              (println "set on click heat called"))

(set-onclick! (by-id "clear-btn") #(do (swap! game-state clear-board)
                                       (swap! iteration (fn [itr] -1))
                                       (swap! game-heatmap empty-heatmap)
                                       (draw-game)
                                       (update-itr)))

Thanks in advance for any assistance.

0

There are 0 answers