Почему не работает click на input text поле?

Question

[Даниил Конев]

https://you-test.site/register.html

У меня код:

$('#name-input').click(function() {
                        $('#name-display',this).css({
                            'display': 'block'
                        });
                    });

Пытаюсь сделать, что при нажатии в поле появлялся блок #name-display, который в none сейчас. Что не так делаю ?

Comments

[ksnk]

$('#name-display',this) в этом случае будет искать элемент внутри input. Что.то мне кажется, что ничего такого там нет

Answer 1

[Ankhena]

Зачем это вообще делать на js?
https://codepen.io/AnnaSummer/pen/xxYygyK
Адаптируйте появление и поведение под себя.

Ваш span на самом деле должен быть label.

Comments

[Даниил Конев]

Спасибо! очень хороший вариант, но я все же не понял, почему JS не срабатывает, в консоле без ошибок...

[Ankhena]

Ivseti, не работает потому что this тут лишнее $('#name-display',this).
Но сейчас вы изменили разметку и поменяли id на классы.
Могло не срабатывать ещё и потому что id дублировались (не помню, не проверяла)

При разметке как сейчас должно быть что-то вроде:

$("input").click(function () {
    $(this).next(".name-display").css({
      display: "block"
    });
  });

Только разумнее менять класс, который будет скрывать блок, чем помнить, что часть стилей в js и вспоминать какой display там был.

Или использовать функции самого jQ типа hide, show и т.д.

Answer 2

[Виктор]

$(this).find('#name-display').css ...
Если так?

Comments

[Даниил Конев]

Поставил, но хоть застрелись, не работает.... Попробовал отдельно просто $('#name-display').css({ 'display': 'block'}); Работает....... Но с функцией не работает ни в какую! пробовал click и focus... Что за.

$(document).ready(function() {

                      $('#name-input').click(function() {

                        $(this).find('#name-display').css({
                            'display': 'block'
                        });

                        });

                      });

[Виктор]

$('#name-input').bind('click', function () { ...

А тебе же нужно по клику на инпут значит bind