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

1. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
2. 
   
3. <table border="1" style="width:100px" style="height:99px" style="margin:0 
4. auto">
5. <tbody>
6. <tr>
7. <td ><div class="row_data" edit_type="click" col_name="datamapname"><i 
8. class="fa fa-pencil"></i><a id="dm" href="https://www.google.com/" 
9. target="_blank">Sample</a></div></td>
10. 
    
11. </tr> 
12. 
    
13. </tbody>
14. </table>

Jquery

1.     $(document).on('click', '.row_data', function(event) 
2. {
3.     //Remove pencil icon.
4.     $(this).find('i.fa-pencil').remove();
5. 
   
6.     //Remove link
7.     $("#dm").removeAttr('href');
8. 
   
9.     event.preventDefault(); 
10.     if($(this).attr('edit_type') == 'button')
11.     {
12.         return false; 
13.     }
14.     //make div editable
15.     $(this).closest('div').attr('contenteditable', 'true');
16.     //add bg css
17.     $(this).addClass('bg-warning').css('padding','5px');
18.     $(this).focus();
19.     $(this).attr('original_entry', $(this).html());
20. })  
21.     //--->make div editable > end
22. 
    
23.   // --> save single field data > start
24.     $(document).on('focusout', '.row_data', function(event) 
25.     {
26.         event.preventDefault();
27. 
    
28.         if($(this).attr('edit_type') == 'button')
29.         {
30.             return false; 
31.         }
32. 
    
33.     //Add pencil icon back
34.         $(this).append('<i class="fa fa-pencil"></i>');
35. 
    
36.     //Add link back
37.     $("#dm").attr('href','https://www.google.com/');
38. 
    
39.     })  

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