Editing links inline with jquery - preventing them from being clicked while editing.

Question

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.

here is the jQuery:

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

and the html snippet:

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

after the edit button is clicked:

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

I've tried using something like:

$('.edit > a').bind("click", function(){
    return false;
});

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

Answer 1

$('.edit > a').bind("click", function(e){
    e.preventDefault();
    return false;
});

Answer 2

try this:

var editing=false;

$(".button-edit").click(function(){
$(".edit").each(function() {
         editing=true;
         $(this).html('<input type="text" value="' + $(this).html() + '" />');
    });
});

$(".button-save").click(function(){
        editing=false;
        //and you pick text from input and put in <p>
});  

$('a.edit').bind("click", function(e){
    if(editing){
          e.preventDefault();
          return false;
     }
});

In place $(".button-save") you can set editing=false when you are exiting editing.