title: Conflicting event-handling in jQuery
body: <p>I have a <code>&lt;div&gt;</code> like this:</p>
  
  <pre><code>&lt;div id="Field1"&gt;
    &lt;label id="label1"&gt;Name&lt;/label&gt;&lt;br/&gt;
    &lt;input type="text" data-attr="text" style="..." id="input1"/&gt;&lt;br/&gt;
    &lt;label id="instr1"/&gt;
    &lt;div class="xfb-row-options1"&gt;
      &lt;a class="button-delete" src="..." style="..."&gt;-&lt;/a&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I already have a jQuery function:</p>
  
  <pre><code>$("#fb_contentarea_col1down21 div").live("click", function(){
    // some stuff to change the properties of the Field,
    // like changing the field name, size.
    return false;
  });
  </code></pre>
  
  <p>I have a <code>&lt;div&gt;</code> with a "delete" image button inside it, and I want to delete this  on clicking "<code>button-delete1</code>". I tried it with:</p>
  
  <pre><code>$("#fb_contentarea_col1down21 div div .button-delete1").live("click", function(){
    //deleting the Div Field1
    return false;
  });
  </code></pre>
  
  <p>Now both my functions conflict. When I click on "<code>button-delete1</code>", my function #1 gets executed and shows me an error.</p>