Нажмите значок в исходном тексте загрузочного ввода

Почему я не могу нажать на значок? Если я нажму на него, я не получу предупреждение.Нажмите значок в исходном тексте загрузочного ввода

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

источник

2016-12-03 Takács Zoltán

разместим ваш CSS, а также. Я пробовал код, отлично работающий для меня. – Satendra

Запустите свой фрагмент, увидев, что он работает. Возможная проблема заключается в вашем css этих двух классов 'inner-addon и right-addon'. post css свойства этих двух классов. – Satendra

Css: .inner-addon { позиция: относительная; } .inner-addon i { позиция: абсолютная; обивка: 10px; указатель-события: нет; .left-addon in {left: 0px;} . Right-addon i {right: 10px; курсор: указатель! important; z-index: 999;} . вход для ввода левого ввода: padding-left: 30px; } . Правый вход аддона {padding-right: 30px; } –

Удалить pointer-events: none; свойство из CSS класса .inner-addon i. Проверьте рабочий фрагмент кода ниже

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

источник

2016-12-03 17:11:14 Satendra

Он работает, спасибо! Теперь я знаю, что означают события указателя. –

Нажмите значок в исходном тексте загрузочного ввода

ответ

Смежные вопросы