Conflicting event-handling in jQuery
<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>
