Modifier des liens en ligne avec jquery - les empêcher d'être cliqués lors de l'édition

Question

Je tente d'éditer des sections d'un site en ligne avec jQuery, tout fonctionne bien jusqu'à maintenant, attendez-vous à ce que certains éléments modifiables soient des liens. Lorsque vous tentez d'éditer les champs, il clique sur le href.

ici est le jQuery:

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

et le fragment de code HTML:

<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> 

après que le bouton d'édition est cliqué:

<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> 

J'ai essayé d'utiliser quelque chose comme:

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

Cependant, cela empêche les champs d'entrée d'être édités. Y at-il un moyen d'empêcher les clics sur le href, mais garder l'entrée modifiable?

Answer 1

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

Answer 2

essayez ceci:

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; 
    } 
}); 

la place $ ("bouton-save."), Vous pouvez définir édition = false lorsque vous quittez l'édition.