CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Takács Zoltán
Takács Zoltán

Reputation: 117

Click icon in bootstrap text input

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>

enter image description here

Upvotes: 0

Views: 465

Answers (1)

Satendra
Satendra

Reputation: 6865

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="[email protected]" />
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Related Questions