Событие click срабатывает только при повторном нажатии (через ON)
вкратце, при вводе в input названия города всплывает окошко с подсказкой доступных городов, соответственно при клике на подсказку выбранный город записывается в input. Все работает, только после 2 клика по подсказке
<style>
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<div class="input_form"><input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var town_from = new Array(
'Альметьевск',
'Москва',
'Армавир',
'Артем',
'Архангельск',
'Астрахань',
'Балаково',
'Барнаул',
'Белгород',
'Березники',
'Бийск',
'Благовещенск',
'Борисоглебск',
'Братск',
'Брянск',
'Буденновск',
'Великий Новгород',
'Владивосток',
'Волгоград',
'Волжский',
'Вологда',
'Воронеж',
'Дзержинск',
'Екатеринбург',
'Иваново',
'Ижевск',
'Иркутск',
'Йошкар-Ола',
'Казань',
'Калининград',
'Каменск-Уральский',
'Кемерово',
'Киров',
'Кострома',
'Краснодар',
'Красноярск',
'Курган',
'Курск',
'Липецк',
'Магнитогорск',
'Миасс',
'Мурманск',
'Набережные Челны'
)
$(document).ready(function(){
$("#from").on("keyup change", function(){
var str=$(this).val().toLowerCase();
var from_result='';
$('#from_help').empty();
if ($(this).val() == '') {from_result ='<div class="nothing">ничего не найдено</div>';}
else
{
var count=0;
for (i in town_from)
{
if (count < 10)
{
var temp=town_from[i].toLowerCase();
if (temp.indexOf(str)==0)
{
$('#from_help').append('<div class="add" >'+town_from[i]+'</div>');
count++;
}
}
}
if (count < 10)
{
for (i in town_from)
{
if (count < 10)
{
var temp=town_from[i].toLowerCase();
if (temp.indexOf(str)!=-1)
{
$('#from_help').append('<div class="add" >'+town_from[i]+'</div>');
count++;
}
}
}
}
if (count==0) {$('#from_help').append('<div class="nothing">ничего не найдено</div>');}
}
})
})
$(document).ready(function(){
$('#from_help').on('click','.add',function () {
$("#from").val($(this).text())
$('#from_help').empty();
alert ('working???');
});
})
// добавление полей
</script>
С чем это связано ? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script type="text/javascript">
$(document).ready(function(){
//$("#from").on("keyup",function(){
$("#from").on("keyup change",function(){
for (var i=0; i<3; i++) {
$('#from_help').append('<div class="add">Item '+i+'</div>');
};
});
});
$(document).ready(function(){
$('#from_help').on('click','.add',function () {
$("#from").val($(this).text())
$('#from_help').empty();
alert ('working???');
});
})
// добавление полей
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>
|
Цитата:
|
loko, ты видишь на моем примере, что у тебя дважды идет добавление городов?
|
Цитата:
$(document).ready(function(){
//$("#from").on("keyup",function(){
$("#from").on("keyup change",function(){
var str=$(this).val().toLowerCase();
var from_result='';
$('#from_help').empty();
var test_bol=false;
if (test_bol) {$('#from_help').append('<div class="add">ничего не найдено</div>');}
else
{
for (var i=0; i<10; i++) {
$('#from_help').append('<div class="add">Item '+i+'</div>');
};
};
});
});
- уже работает в 2 клика ... Так с чем это связано ? Это баг jQuery ? |
автодополнение
:write:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script>
$(document).ready(function () {
function like(str) {
var town_from = [
'Альметьевск',
'Москва',
'Армавир',
'Артем',
'Архангельск',
'Астрахань',
'Балаково',
'Барнаул',
'Белгород',
'Березники',
'Бийск',
'Благовещенск',
'Борисоглебск',
'Братск',
'Брянск',
'Буденновск',
'Великий Новгород',
'Владивосток',
'Волгоград',
'Волжский',
'Вологда',
'Воронеж',
'Дзержинск',
'Екатеринбург',
'Иваново',
'Ижевск',
'Иркутск',
'Йошкар-Ола',
'Казань',
'Калининград',
'Каменск-Уральский',
'Кемерово',
'Киров',
'Кострома',
'Краснодар',
'Красноярск',
'Курган',
'Курск',
'Липецк',
'Магнитогорск',
'Миасс',
'Мурманск',
'Набережные Челны'
],
html = '',
str = new RegExp("^" + str, "i");
for (var i = 0; i < town_from.length; i++) {
if (str.test(town_from[i])) html += '<div class="add">' + town_from[i] + '</div>'
}
return html
}
$("#from").on("input", function () {
var val = this.value;
$('#from_help').html(val.length ? like(val) : '')
});
$('#from_help').on('click', '.add', function () {
$("#from").val($(this).text())
$('#from_help').html('');
});
})
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
Всем спасибо, разобрался
|
| Часовой пояс GMT +3, время: 03:54. |