Question

我有以下代码可以编辑单元格，但是问题是当我想单击链接时，它迫使我进行编辑。我只希望单击笔图标时才能进行编辑，但似乎无法弄清楚该怎么做。

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<table border="1" style="width:100px" style="height:99px" style="margin:0 
auto">
 <tbody>
  <tr>
   <td>
    <div class="row_data" edit_type="click" col_name="datamapname">
     <i class="fa fa-pencil"></i>
     <a id="dm" href="https://www.google.com/" target="_blank">Sample</a> 
    </div>
   </td>
  </tr> 
 </tbody>
</table>

jQuery

//--->make div editable > start
$(document).on('click', '.row_data', function(event) 
{
  //Remove pencil icon.
  $(this).find('i.fa-pencil').remove();

  //Remove link
  $("#dm").removeAttr('href');

  event.preventDefault(); 
  if($(this).attr('edit_type') == 'button')
  {
    return false; 
  }

  //make div editable
  $(this).closest('div').attr('contenteditable', 'true');

  //add bg css
  $(this).addClass('bg-warning').css('padding','5px');
  $(this).focus();
  $(this).attr('original_entry', $(this).html());
})  
//--->make div editable > end

// --> save single field data > start
$(document).on('focusout', '.row_data', function(event) 
{
  event.preventDefault();

  if ($(this).attr('edit_type') == 'button')
  {
    return false; 
  }

  //Add pencil icon back
  $(this).append('<i class="fa fa-pencil"></i>');

  //Add link back
  $("#dm").attr('href','https://www.google.com/');      
})

JSFiddle：https://jsfiddle.net/89zgd1ry/

Answer 1

将锚标记包装在另一个div中，并设置contentEditable="false"。

尝试阅读this

Answer 2

当我想单击链接时，它迫使我进行编辑。

这是因为单击处理程序位于父row_data div上

我希望仅在单击笔图标时才能进行编辑

更改

$(document).on('click', '.row_data',

到

$(document).on('click', '.row_data>i.fa-pencil',

this然后将引用该图标，因此您必须进行适当的更改，例如：

$(this).find(".fa-pencil").remove();

成为

var row = $(this).closest(".row_data");
$(this).remove();

Answer 3

添加

$('#dm').click(function( e ){ e.preventDefault(); });

还有

$(document).on('click', '.fa-pencil',...

强制编辑链接，而不是去链接可编辑表格单元格中的链接

3 个答案: