Кликабельный шрифт удивительный значок внутри входа

В настоящее время у меня есть значок шрифта awesome, который расположен над полем ввода. Я хотел бы, чтобы значок был кликабельным, но я не могу заставить его работать. Я завернул его в пролет и изменил проклятие пролета, но это, похоже, не оказывает никакого эффекта.

Вот код:

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .fa {
  left: 0px;
}
.right-addon .fa {
  right: 0px;
}
.left-addon input {
  padding-left: 30px;
}
.right-addon input {
  padding-right: 30px;
}
#locationClickableIcon {
  cursor: pointer;
}
 <span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span>
<input type="text" id="address" placeholder="Zipcode" value="" />

1 ответ

  1. Это не имеет никакого эффекта, потому что вы не попросили его сделать что-нибудь при нажатии. Это работает в соответствии с тем, что вы хотели. Если вы хотите, чтобы он вел себя как ссылка, измените <span>на <a>и дайте обработчик щелчка.

    Нажмите Обработчик

    $(function () {
      $("#locationClickableIcon").click(function () {
        alert("You clicked me!");
      });
    });
    .inner-addon {
      position: relative;
    }
    
    .inner-addon .fa {
      position: absolute;
      padding: 10px;
      pointer-events: none;
    }
    
    .left-addon .fa  { left:  0px;}
    .right-addon .fa { right: 0px;}
    
    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }
    #locationClickableIcon {
      cursor: pointer;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span>
    <input type="text" id="address" placeholder="Zipcode" value="" />

    Ссылка

    .inner-addon {
      position: relative;
    }
    
    .inner-addon .fa {
      position: absolute;
      padding: 10px;
      pointer-events: none;
    }
    
    .left-addon .fa  { left:  0px;}
    .right-addon .fa { right: 0px;}
    
    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }
    #locationClickableIcon {
      cursor: pointer;
    }
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    <a id="locationClickableIcon" href="http://example.com/"><i class="fa fa-crosshairs" id='autolocate'></i></a>
    <input type="text" id="address" placeholder="Zipcode" value="" />