Posted by: anonkun Jan 12 2019, 03:50 AM
I have the following code which allows me to edit a cell, but the problem is that when I want to click on the link, it forces me to edit instead. I want to be able to edit only when I click on the pen icon, but I can't seem to figure out how to do it.
HTML
CODE
<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>
CODE
$(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/
Posted by: Christian J Jan 12 2019, 05:06 AM
I don't do jQuery, but this part looks like it makes the link editable when you click anywhere in .row_data (including on the link?):
CODE
$(document).on('click', '.row_data', function(event)