Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Можно ли повесть событие на input с disabled? (https://javascript.ru/forum/misc/50245-mozhno-li-povest-sobytie-na-input-s-disabled.html)

light 18.09.2014 13:18

Можно ли повесть событие на input с disabled?
 
Вот такой код работает если
<input type="text" id="i36" />
		
	$('#i36').hover(function(){	
		$('.test').show();
	},function(){
		$('.test').hide();
	});


Но перестает работать если поставить disabled
<input type="text" id="i36" disabled="disabled" />

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

ksa 18.09.2014 13:38

Цитата:

Сообщение от light
Можно это как то обойти?

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

tsigel 18.09.2014 14:29

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

light 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 18.09.2014 14:37

light,
Я же говорю что он не должен быть вложен в элемент на котором вы слушаете событие.
Сделайте так:
<div class="test"></div>
<input type="text" class="test2" value="test" />

ksa 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>

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

BETEPAH 18.09.2014 14:54

Цитата:

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

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

tsigel 18.09.2014 15:01

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


Часовой пояс GMT +3, время: 02:35.