Форум

light · #1 (**permalink**) 18.09.2014, 13:18

Вот такой код работает если

<input type="text" id="i36" />
		
	$('#i36').hover(function(){	
		$('.test').show();
	},function(){
		$('.test').hide();
	});

Но перестает работать если поставить disabled

<input type="text" id="i36" disabled="disabled" />

Можно это как то обойти?

ksa · #2 (**permalink**) 18.09.2014, 13:38

Сообщение от light

Можно это как то обойти?

Как вариант:
- засунуть тот инпут в другой элемент
- повесить обработчики на тот элемент

tsigel · #3 (**permalink**) 18.09.2014, 14:29

ksa,
Этот вариант не сработает, так как дизейбленные элементы не запускают делегирование событий. Можно положить элемент который не является родителем точно над инпутом и слушать события на нем.

light · #4 (**permalink**) 18.09.2014, 14:33

tsigel,
Почему же?) Была такая идея, в принципе бы подошло.
Только столкнулся с другой проблемой. Не могу перекрыть input.
z-index не срабатывает, и все равно на переднем плане остается input.

<style>
	.test {
		background: none repeat scroll 0 0 #ff0000;
		height: 38px; 
		position: absolute;
		width: 226px;
		z-index: 333;	
	}  
	
	.test2 { 
		height: 38px; 
		position: absolute;
		width: 226px;
		z-index: 111;	
	}
</style>

<div class="test">
	<input type="text" class="test2" value="test" />
</div>

tsigel · #5 (**permalink**) 18.09.2014, 14:37

light,
Я же говорю что он не должен быть вложен в элемент на котором вы слушаете событие.
Сделайте так:

<div class="test"></div>
<input type="text" class="test2" value="test" />

ksa · #6 (**permalink**) 18.09.2014, 14:47

Сообщение от tsigel

ksa,
Этот вариант не сработает

Бивас, тест! (с)

<!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'>
.test {
	display: none;
}
</style>
<script type='text/javascript'>
$(function (){
	$('#i36').parent().hover(function(){	
		$('.test').show();
	},function(){
		$('.test').hide();
	});
});
</script>
</head>
<body>
<span><input type="text" id="i36" disabled="disabled" /></span>
<p class='test'>Test</p>
</body>
</html>
</html>

Таки работает!

BETEPAH · #7 (**permalink**) 18.09.2014, 14:54

Сообщение от light

z-index не срабатывает, и все равно на переднем плане остается input.

забыли о контексте наложения. Для input.test2 контекстом стал div.test

tsigel · #8 (**permalink**) 18.09.2014, 15:01

ksa,
Действительно работает, а почему тут не проходит событие до родителя?
пост

Форум

Справочник

Discord чат

Курсы javascript