Javascript-форум - Помогите пожалуйста разобраться

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Помогите пожалуйста разобраться (https://javascript.ru/forum/events/40400-pomogite-pozhalujjsta-razobratsya.html)

Помогите пожалуйста разобраться

Уважаемые специалисты, подскажите пожалуйста
Нужно отловить щелчек мыши вне элемента 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>

[html run]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

$('.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");

});

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

не, так не пойдёт :)
берешь весь свой код, делаешь отступы в коде (как положено по одной дополнительной табуляции на каждом уровне), далее обрамляешь его в [html run hide] и [ /html] (пробел уберёшь) и выкладываешь, тогда можно будет смотреть твой пример

да и кучу $(document).ready убери сразу, достаточно одного

Цитата:

Сообщение от Дзен-трансгуманист

В такие моменты особенно остро чувствуешь нужду, чтобы в RTFM была еще и ссылка на бьютифаер...

там по умолчанию тоже не совсем всё ладно, надо, как минимум выставить
indent with a tab character и wrap line near ..., дабы не получить более красивое убожество :)
начинающим ручками надо форматировать, а может быть и всегда ими

Прошу прощения за свою торопливость

<!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>
[js]
<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();
});
});

$(function(){
$(".one").mouseout(function(){
$(".href_hov",this).hide();
});
});
$(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>
[/js]
[css]
<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>
[/css]
</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>

Проблема в 46 строке, но без нее пропадает ссылка удалить про ховере

ну кнопку run добавил, уже хорошо, остальное видимо не читал :D

Цитата:

Сообщение от Дмитрий Петров

Прошу прощения за свою торопливость

продолжаем экзекуцию: требуется сделать это

Цитата:

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

берешь весь свой код, делаешь отступы в коде (как положено по одной дополнительной табуляции на каждом уровне), далее обрамляешь его в [html run hide] и [ /html] (пробел уберёшь) и выкладываешь, тогда можно будет смотреть твой пример

Цитата:

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

да и кучу $(document).ready убери сразу, достаточно одного

лишнего (типа [css]) добавлять не нужно

да, ещё поясни зачем тебе вообще форма