javascript - 使用 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;
});