Обработчик клика не получает вызов на вложенном элементе span

Question

Я использую bootstrap css для своего макета. Ниже приведен html.

<form id="todoform"> 
<div id="todo-1" class="row"> 
<div class="col-lg-6"> 
    <div class="input-group input-group-lg"> 
    <span class="input-group-addon" id="sizing-addon1"> <input type="checkbox" id="chk-1" aria-label="..."></span> 
    <input type="text" id="comment-1" class="form-control" placeholder="what is the work" aria-describedby="sizing-addon1"> 
    <span id="remove-1" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </div> 
</div> 
</div> 

Я попытался написать функцию, которая получит вызванное сообщение, щелкнув элемент span, id = remove-1. Обе функции вызываются в готовом обратном вызове.
Следующее так, как я пытался
1) Давая идентификатор напрямую.

$(document).ready(function(){ 
$("#remove-1").click(function() 
     { 
      console.log("clicked on image"); 
     }); 
}); 

2) путем присоединения явного обработчика с помощью "на"

$(document).ready(function(){ 
    $("body").on("click",".glyphicon-remove",function() 
     { 
      console.log("clicked on image"); 

     }); 
    }); 

Оба способа не работают. Я использую хром 49.

Answer 1

В настоящее время атрибут pointer-events привязанных к элементу устанавливается в none, которое вызывает щелчок, чтобы не получить признанный (это из .form-control-feedback класса Bootstrap).

Кроме того, ваш z-index немного разряжен, и ваш фактический значок будет скрыт, если элемент <input> сфокусирован.

Попробуйте добавить следующий стиль CSS, который должен решить проблему:

#remove-1 { 
    z-index: 3; 
    pointer-events: auto; 
} 

Вы можете see an example of it in action here, а также.

Answer 2

Ваш JavaScript верен, вам просто нужно создать свой диапазон, чтобы он имел область щелчка, например.

.glyphicon-remove { 
    background: red; 
    height: 10px; 
    width: 10px; 
    display: block; 
} 

Без стиля элемент скрыт и поэтому JS не может связываться с ней