javascript - 单击事件在单击内部跨度元素时不起作用

Question

我已经像这样构建了 dom 。根据数据库中的计数动态添加。

<div class="todo-task">
    <input type="checkbox" id='check1' />
    <label for='check1'> asdasdasdasdasd 
        <span class="todo-remove mdi-action-delete"></span> 
    </label> 

<div> 
      <input/>
      <label>
           <span></span>
      </label>
 </div> 

这是我的 DOM 结构 当我单击内部跨度元素时，单击事件不起作用。当我将 span 作为一个独立元素保留在 div 之外时，它工作得很好。关于为什么点击在内部 span 元素中没有引发的任何建议

这是我的点击事件

$(document).on('click', '.todo-remove', function () {
      alert( 'Delete');
});

Answer 1

“span”元素没有 .todo-remove 类，在这种情况下，不会调用该事件。尝试将类添加到 span 并添加一些样式，如下所示:

padding: 20px;
display: block;
float: right;

当然，您稍后会更改此代码。