jqueryとインラインでリンクを編集する - 編集中にリンクがクリックされないようにする

Question

サイトのセクションをjQueryでインラインで編集しようとしていますが、編集可能なアイテムの一部がリンクであることが予想されます。フィールドを編集しようとすると、hrefをクリックします。ここ

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

ただし、入力フィールドが編集されないようにします。 hrefのクリックを防止する方法はありますか？入力を編集可能にしておきますか？

Answer 1

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

Answer 2

これを試してみてください（ "ボタン保存"）場所$で

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

あなたが編集を終了しているときに偽編集=を設定することができます。