title: overriding JQuery .click() function
body: <p>i'm having a bit of a prblem with the jquery click function, below is part of the layout of my code:</p>
  
  <pre><code>&lt;td id="01" class="day-main-diary"&gt;
      &lt;div title="sdfsdf" class="diary-event ui-corner-all"&gt;
          &lt;span id="delete"&gt;&lt;/span&gt;
          &lt;div class="diary-event-title ui-corner-all"&gt;
              sdfsdf
          &lt;/div&gt;
          &lt;div class="diary-event-body ui-corner-all"&gt;
              &lt;p class="hyphenate"&gt;sdfsdf&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The title, text in diary-event-title and text in diary-event-body are all dynamically generated and the class 'day-main-diary' has a click function bound to it (the actual code in the js file is:</p>
  
  <pre><code>$('.day-main-diary').click(function(){
     // Code is here
  }
  </code></pre>
  
  <p>i am looking for a way for a click event to be recognised on the span with the id of 'delete',
  amongst other things i have tried </p>
  
  <pre><code>$('.day-main-diary #delete').click(function(){
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('#delete').click(function(){
  </code></pre>
  
  <p>however, each time it completely ignores this event and always calls the day-main diary click event.</p>
  
  <p>can anyone help me? i will be eternally greatfull
  -Matt</p>