JavaScript 點擊事件的奇葩問題...請指教下

代碼：

<button class="del-btn">
    <i class="layui-icon">&#xe640;</i>刪除
</button>

$(".del-btn").on("click", function () {
    alert('刪除');
});

疑問：

這個按鈕的樣式如上圖，點擊文字以外的區(qū)域，click事件正常觸發(fā)，但在文字上點擊則無效，起初我以為是jQuery庫的問題，于是代碼改成了這樣：

<button class="del-btn" onclick="alert('刪除')">
    <i class="layui-icon">&#xe640;</i>刪除
</button>

結果發(fā)現(xiàn)還是一樣的，煩請遇到過類似問題的朋友解答下，除了文字區(qū)域都沒問題，點圖標都會正常觸發(fā)click，為什么文字就無效了呢？