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

在$ $（“。button-save”）中，您可以在退出编辑时设置 editing = false 。

编辑与jquery内联的链接 - 防止在编辑时单击它们

2 个答案: