Уважаемые специалисты, подскажите пожалуйста
Нужно отловить щелчек мыши вне элемента input, и при этом скрыть другой.Попытался реализовать это следующим образом
$('.input_hov').focusout(function(event){
if( $(event.target).closest(".submit_hov").length )
return;
$(".submit_hov").fadeOut("fast");
event.stopPropagation();
$(".hover_href").attr("class","href_hov");
});
Скрытие элемента происходит,но не совсем корректно.При щелчке на div class="one" сценарий не срабатывает.
для наглядности ниже код.
<!doctype html>
<html>
<head>
<title>Вторая часть</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function addInput() {
/* default-id — скрытый элемент формы, из которого берется id для первого создаваемого элемента */
var id = document.getElementById("default-id").value;
id++;
/* в форму с именем testform добавляем новый элемент */
$("#basic").append('<div id="div-' + id + '" class="one"><form name="testform" action="#" method="POST"><input class="input_hov" name="input-' + id + '" id="input-' + id + '" value="0"><a class="href_hov" href="javascript
:{}" onclick="removeInput(\'' + id + '\')">Удалить</a><input type="submit" class="submit_hov" value="Сохранить"></form></div>');
/* увеличиваем счетчик элементов */
document.getElementById("default-id").value = id;
var id = document.getElementById("default-id").value;
id++;
$(document).ready(function(){
$(".one").mouseover(function(){
$(".href_hov",this).show();
});
});
$(document).ready(function(){
$(".one").mouseout(function(){
$(".href_hov",this).hide();
});
});
$(document).ready(function(){
$(".input_hov").focusin(function(){
$(".href_hov").attr("class","hover_href");
$(".hover_href").attr("style","display: none;");
});
})
$(function(){
$(".one").click(function(){
$('.submit_hov',this).show();
});
});
/*!!!Здесь пытаемся скрыть кнопку сохранить!!!*/
$('.input_hov').focusout(function(event){
if( $(event.target).closest(".submit_hov").length )
return;
$(".submit_hov").fadeOut("fast");
event.stopPropagation();
$(".hover_href").attr("class","href_hov");
});
}
function removeInput(id) {
$("#div-" + id).remove();
}
</script>
<style>
body{
font-family:Arial;
font-size:14px;
}
.href_hov{
display:none;
}
.submit_hov{
display:none;
}
.hover_href{
display:none;
}
.one{
margin:5px;
width:250px;
padding:20px;
}
.input_hov{
width:100px;
text-align:right;
border:1px solid transparent;
margin-right:30px;
background:transparent;
}
.one:hover{
background-color:#b3e0f4;
}
.money{
font-weight:bold;
}
#basic{
padding-left:30px;
}
</style>
</head>
<body>
<input type="button" value="Добавить строчку" onclick="addInput()">
<input class="hov" type="hidden" id="default-id" value="0">
<p class="money">Сумма, р.</p>
<div id="basic">
</div>
</body>
</html>
