Почему не работает slideUp если кнопка находиться внутри блока?

Question

[rinaz22]

Всем привет! Есть form с id="login". Внутри этой формы есть ссылка с onclick='$('#login').slideUp(500);'
Если эта ссылка находиться внутри формы, которую нужно скрыть, то форма просто исчезает(не плавно).
А если ссылка находиться вне формы, то все ок.
Для формы не прописаны ни каких стилей. Из за чего это может быть?

Answer 1

[irishmann]

Выносите действие клика по ссылке отдельный обработчик и заблокируйте действие по-умолчанию.
Например, вот так:

Test test test <br>
<form id="login_form">
	<input type="text" value="Test">
	<br><br>
	<a href="#" id="close_login_form">
 		Закрыть форму
	</a>
</form>
<br>
Test test test

<script type="text/javascript">
	$(document).on("click", "#close_login_form", function(elem){
		elem.preventDefault();
		$("#login_form").slideUp(500);
	});
</script>

Comments

[rinaz22]

Это не button, а обычная ссылка

[irishmann]

rinaz22, затупил, киньте вашу реализацию

[rinaz22]

irishmann,

<form method="post">
        <div class="input" id="login">
            Блок 1
        </div>
        
        <div class="input" id="reg" style="display:none;">
            Блок 2
        </div>
        <a href="#pass">Забыли пароль?</a>
        <a href="#reg">Регистрация</a>
    </form>

<script>
    $('a').on("click", function() {
        $('#login').slideUp();
        $('#reg').slideDown();
    });
</script>

[rinaz22]

irishmann, решил! Просто сделал 1 блок .input а поля поместил в другой блок и slideUp теперь работает с 2-ым блоком