【问题标题】：clicking event not working on clicking inner span element单击事件在单击内部跨度元素时不起作用
【发布时间】：2015-08-17 12:40:20
【问题描述】：

我有这样的 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 结构当我单击内部跨度元素时，单击事件不起作用。当我将 div 的跨度作为独立元素保留时，它可以正常工作。为什么点击没有在内部span 元素中提升的任何建议

这是我的点击event

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

【问题讨论】：

您是否停止传播该删除跨度的任何父元素？
不，我不会停下来。
我看到 check1 的标签 后缺少单引号。你没有把它关得不够好..这可能是问题..除此之外它很好..
span 里面好像没有click 的内容？
或者您希望click 在label 对象上？

标签： javascript jquery jquery-ui dom

【解决方案1】：

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

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

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

【讨论】：

todo-remove{float:right;font-size:1.5rem} 这是我用于 todo-remove 的样式

【解决方案2】：

试试这个 javascript。它会为你工作。

$("label[for='check1']").click(function(){
  alert("deleted");
});

【讨论】：

我不能这样做，因为 CSS 写得很好。它添加了一个带有该类的标签和跨度元素，在标签的右侧添加了一个图标。
详细？只要跨度有内容和/或样式，标签内有跨度并没有错。
asdasdasdasdasd asdasdasdasdasd 是我的标签文本。 - 这将添加一个图标。当我点击那个图标时想要引发一个事件。
更新了我的答案。我希望它会帮助你。谢谢
不好。对于这个小任务，这么多的 css 和 javascript 并不是一个好办法。

【解决方案3】：

以下代码适合我： http://jsfiddle.net/Lknca8f1/

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

.todo-remove{
    padding:20px;
    background: #f00;
    cursor:pointer;
}

$(function(){
    $(document).on('click','.todo-remove', function(){
        $(this).closest('.todo-task').remove();
    });
})

【讨论】：

jsfiddle.net/Vijay8059/29Louc5r/1 在 js 中添加（我复制了整个文件）我正在使用它在单击 span 时不起作用
user1844634 你的代码下面的脚本有什么用，它导致“防止默认”

【解决方案4】：

工作代码链接Codepen

我是你在 DOM 准备好之前注册的事件。请在活动就绪后注册。

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

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

【讨论】：

【解决方案5】：

解决方法是将内部跨度的 z 缓冲区设置为 -1 即

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

【讨论】：