Question

我有这些动态添加到html表的图标。其中一个是垃圾桶。单击它时，应该删除该行。

在开发过程中，我在Firefox，Chrome和IE中进行了测试，这一切都像魅力一样。但是现在有一个Safari用户注意到在Safari中根本没有触发点击。我下载并安装了最新版本的Safari for Windows来检查自己，当点击垃圾桶图标时确实没有任何反应。

奇怪的是，该页面在其他元素上有更多点击事件，可以在Safari中完美运行。

他们都使用.on（）和.off（）。（有些只是一个.click（））。

我的代码：

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

正如您所看到的，不是很复杂的jQuery代码。有没有人知道为什么它在Firefox，Chrome和IE中有效，而在Safari中却没有？

编辑：另外我注意到Safari中的另一个奇怪的行为。在CSS中，我将光标指向一个指针。同样，所有浏览器，但Safari正确添加CSS规则。类.deleteRow的标记是<i>标记..

编辑：

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

以上是每次用户点击按钮时都会添加到<table>的HTML。该图标位于最后一个<td>标记中。

Answer 1

我找到了解决方案。它与我猜的标签类型有关。如果我在<i>标签的背景中添加颜色，则可以使用。

所以在CSS中我做了：

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

现在光标是一个指针，点击处理程序可以正常工作。

不知道为什么......

Answer 2

这样的事情是正确的。

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

jQuery .on（'click'，..不会在safari中触发

2 个答案: