jQuery .on('click',.. does not trigger in

Question

I have these icons which are added dynamically to a html table. One of them is a trashcan. When it gets clicked the row should be deleted.

During development I tested it in Firefox, Chrome and IE and it all worked like a charm. But now there was a Safari user who noticed the click isn't triggered in Safari at all. I downloaded and installed the latest version of Safari for Windows to check myself and indeed nothing happens when clicking the trashcan icon.

The strange bit is, The page has more click events on other elements which work perfectly in Safari.

They all use the .on() and .off(). (some are just a .click() ).

My code:

/**
 * Delete row from html table 
 */
$(document).on('click', '.deleteRow', function() {
    $('#row_' + $(this).attr('id').substr(4)).remove();
});

As you can see not really complicated jQuery code. Does anyone know why it works in Firefox, Chrome AND IE while it doesn't in Safari ?

EDIT: In addition I noticed another strange behaviour in Safari. In CSS I make the cursor a pointer. Again all browsers but Safari add the CSS rule correctly. The tag with class .deleteRow is an <i> tag..

EDIT:

html = '<tr class="rowDomain" id="row_'+domain+'_'+ext+'">';
html += '<td class="get"><input type="hidden" name="hdnDomains[]" value="'+domain+'_'+ext+'_'+a+'_'+term+'_'+data.price+'" />'+domain+'.'+ext+' '+stars+'</td>';
html += '<td class="'+a+'">'+b+'</td>';
html += '<td>'+term+' jaar</td><td>&euro; '+(parseFloat(data.price).toFixed(2)).toString().replace('.',',')+'</td>';
html += '<td><i class="deleteRow icon-trash" id="btn_'+domain+'_'+ext+'" title="Verwijder domein uit selectie."></i></td>';
html += '</tr>';
$('#tblDomains').append(html);

The above is the HTML which gets added to my <table> each time a user clicks a button. The icon is in the last <td> tag.

Answer 1

Something like this will be correct..

$('.deleteRow').on('click', function() { 
  $(this).parents('tr:first').remove();
});

Answer 2

I found a solution. It had something to do with the type of tag I used I guess. If I add a color to the background of the <i> tag it works.

So in CSS I did:

.deleteRow {background-color:rgba(255,255,255,0.1);}

Now the cursor IS a pointer and the click handler does its work.

Don't know about the why though...