javascript - 单击 Bootstrap 文本输入中的图标

Question

为什么我无法点击图标？如果我点击它，我不会收到警报。

$('#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

从 .inner-addon i 类的 css 中删除 pointer-events: none; 属性。检查下面的工作片段

$('#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>