jQuery не удаляет подчеркивание для добавленных элементов

0

Демо-скрипка

HTML:

<div id = 'box' class = 'hide'>

    <button id = 'add'>add</button>

    <div class = 'entry'>
        <input type = 'text' class = 'name' placeholder = 'name'>
        <input type = 'text' class = 'email' placeholder = 'email'>
    </div>

</div>

ЯШ:

$("#add").click(function() {
    $("#box").append("<div class = 'entry'>"
                     + "<input type='text' class='name' placeholder='name' spellcheck='false'></input>" 
                     + "<input type='text' class='email' placeholder='email' spellcheck='false'></input>"
                     + "</div>");
});

$('#box .entry input[type=text]').blur(function() {
      if ($(this).val().length > 0) {
        $(this).css('border-bottom', '3px solid transparent');
    } else {
        $(this).css({
            borderBottom: '3px solid blue'
        });
    }
});

Поле ввода будет подчеркнуто при размытии, если оно пустое. Однако этот эффект не применяется к новым добавленным входам. Почему это происходит?

Теги:

3 ответа

2
Лучший ответ

Вы должны использовать делегирование событий.

Используйте .on();

Сделай это:

$('box').on('blur','#box .entry input[type=text]',function () {
    if ($(this).val().length > 0) {
        $(this).css('border-bottom', '3px solid transparent');
    } else {
        $(this).css({
            borderBottom: '3px solid blue'
        });
    }
});

демонстрация

.blur() прикрепляется и забывается, тогда как .on() является динамическим.

Поделиться
  • 0
    Этот фрагмент кода будет прослушивать все размытие в документе. Правильный способ сделать это - вставить элементы ввода в форму и добавить слушатель размытия на элемент формы. Потому что кроме документа, элементы формы могут слушать размытие элемента.
  • 0
    @ user2975123, я уменьшил область действия сейчас.
Показать ещё 2 комментария
1

jQuery будет сканировать документ один раз на загрузке страницы для присоединения событий, но для отслеживания новых элементов вам понадобится использовать метод.on():

$('document').on('blur', '#box .entry input[type=text]', function() {
    //...
});
Поделиться
0

Потому что вам нужно повторно blur() с новыми добавленными элементами.

<script>

rebind_blur();
$("#add").click(function() {
    $("#box").append("<div class = 'entry'>"
                 + "<input type='text' class='name' placeholder='name' spellcheck='false'></input>" 
                 + "<input type='text' class='email' placeholder='email' spellcheck='false'></input>"
                 + "</div>");

    rebind_blur();
});

function rebind_blur(){
    $('#box .entry input[type=text]').blur(function() {
        if ($(this).val().length > 0) {
            $(this).css('border-bottom', '3px solid transparent');
        } else {
            $(this).css({
                borderBottom: '3px solid blue'
            });
        }
    });

}

jsFiddle

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню