title: how to call different jquery actions in responsive design
body: <p>I'm at the point to convert my project into an responsive design.</p>
  
  <p>What is the most handy and universal solution do you suggest to implement different jQuery-blocks for each breakpoint?</p>
  
  <p>I want to keep all scripts in one file cause of number of http-requests.</p>
  
  <p>That's what I've found:</p>
  
  <ul>
  <li><a href="http://xoxco.com/projects/code/breakpoints/" rel="noreferrer">breakpoint.js</a> -> define all breakpoints doubled in CSS &amp; JS</li>
  <li><a href="http://responsejs.com/" rel="noreferrer">http://responsejs.com/</a> -> define breakpoints in body data-attr</li>
  <li><a href="http://www.springload.co.nz/love-the-web/responsive-javascript/" rel="noreferrer">OnMediaQuery</a> -> define human-readable names for the breakpoints (IMHO better, cause you're not bound to pixels)</li>
  </ul>
  
  <p>My problem is, they all define callbacks, but I don't know how to bind or cancel any jQuery event-listeners in these cases.</p>
  
  <p>e.g. I have:</p>
  
  <pre><code>$('#selector').click( function() {
      alert('selector clicked');
  });
  </code></pre>
  
  <p>but that should only happen if in max-width of 320px.
  In screen-sizes above that the click should return false or perform any other action</p>
  
  <p>at the moment, I don't have a clue how to accomplish this.</p>