Click icon in bootstrap text input

Question

Why can't I click on the icon? If I click it, I don't get an alert.

 $('#copy_address').click(function(e) { alert("Teszt"); }); 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label class="control-label col-sm-3" for="kapcsolat_email">E-mail cím</label> <div class="col-sm-9 inner-addon right-addon"> <i class="fa fa-clipboard" aria-hidden="true" id="copy_address"></i> <input class="form-control" id="ajanlatkeres_email" name="ajanlatkeres_email" type="text" value="<?php echo html($data['ajanlatkeres_email']); ?>" /> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

Remove pointer-events: none; property from css of class .inner-addon i . Check the working snippet below

 $('#copy_address').click(function(e) { alert("Teszt"); }); 

 .inner-addon { position: relative; } .inner-addon i { position: absolute; padding: 10px; /*pointer-events: none;*/ /*remove this property*/ } .left-addon in { left: 0px; } .right-addon i { right: 10px; cursor:pointer !important; z-index:999; } .left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label class="control-label col-sm-3" for="kapcsolat_email">E-mail cím</label> <div class="col-sm-9 inner-addon right-addon"> <i class="fa fa-clipboard" aria-hidden="true" id="copy_address"></i> <input class="form-control" id="ajanlatkeres_email" name="ajanlatkeres_email" type="text" value="test@test.com" /> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>