Редактирование ссылок, встроенных в jquery - предотвращение щелчка по ним во время редактирования

Question

Я пытаюсь редактировать разделы сайта, встроенные в jQuery, пока все работает нормально, ожидаю, что некоторые редактируемые элементы - это ссылки. При попытке отредактировать поля, он щелкает по ссылке.

вот jQuery:

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

и фрагмент 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>

после нажатия кнопки редактирования:

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

Я пытался использовать что-то вроде:

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

однако, это предотвращает редактирование полей ввода. Есть ли способ предотвратить нажатие на ссылку, но оставить ввод редактируемым?

Answer 1

попробуйте это:

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

Вместо $ (". Button-save") вы можете установить edit = false при выходе из редактирования.

Answer 2

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