单击事件不能单击内部元素

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作为一个独立元素保持在div的一侧时，它工作正常。任何有关点击不会在内部span元素

中引发的建议

这是我的点击event

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

Answer 1

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

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

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

Answer 2

试试这个javascript。它会对你有用。

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

Answer 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();
    });
})

Answer 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');
  });
});

Answer 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>