CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Tanmay Patil
Tanmay Patil

Reputation: 699

Click handler is not getting called on nested span element

I am using bootstrap css for my layout . Following is the 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>

I have tried to write a function , which will get called post clicking a span element , id = remove-1. Both the function are called in the ready call back.
Following is the way i tried
1) By giving id directly . 

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

2) by attaching explicit handler using "on" 

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

         });
  });

Both ways are not working . I am using chrome 49.

Upvotes: 0

Views: 208

Answers (2)

Rob Howells
Rob Howells

Reputation: 516

Your JavaScript is correct, you just need to style your span so that it has a click area, e.g.

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

Without any styling the element is hidden and so the JS can't bind to it

Upvotes: 2

Rion Williams
Rion Williams

Reputation: 76547

Currently the pointer-events attribute tied to your element is set to none, which is causing the click to not get recognized (this is from the .form-control-feedback class in Bootstrap).

Additionally, your z-index is a bit low and is causing your actual icon to be hidden when the <input> element is focused on.

Try adding the following CSS style, which should resolve the issue:

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

You can see an example of it in action here as well.

Upvotes: 1

Related Questions