Editing links inline with jquery - preventing them from being clicked while editing
<p>I am attempting to edit sections of a site inline with jQuery, everything is working fine so far, expect that some of the editable items are links. When attempting to edit the fields, it's clicking through on the href.</p>

<p>here is the jQuery:</p>

<pre><code>$(".button-edit").click(function(){
    $(".edit").each(function() {
       $(this).html('&lt;input type="text" value="' + $(this).html() + '" /&gt;');
   });
});
</code></pre>

<p>and the html snippet:</p>

<pre><code>&lt;li class="list-item" id="list-item-229"&gt;&lt;a href="http://test.com/" class="edit"&gt;My site&lt;/a&gt;
&lt;p class="edit"&gt;lorum ipsum description&lt;/p&gt;&lt;/li&gt;
</code></pre>

<p>after the edit button is clicked:</p>

<pre><code>&lt;li class="list-item" id="list-item-229"&gt;&lt;a href="http://test.com/" class="edit"&gt;&lt;input type="text" value="My Site"&gt;&lt;/a&gt;
&lt;p class="edit"&gt;&lt;input type="text" value="lorum ipsum description"/&gt;&lt;/p&gt;&lt;/li&gt;
</code></pre>

<p>I've tried using something like:</p>

<pre><code>$('.edit &gt; a').bind("click", function(){
    return false;
});
</code></pre>

<p>however it prevents the input fields from being edited. Is there a way to prevent clicks on the href, but keep the input editable?</p>
