Question

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>

JS：

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

如果输入框空白，则会在模糊下加下划线。但是，此效果不会应用于新添加的输入。为什么会这样？

Answer 1

您应该使用事件委派。

使用.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'
        });
    }
});

Demo

<{> .blur()是附加并忘记，而.on()是动态的。

Answer 2

jQuery将在页面加载时扫描文档一次以附加事件，但为了跟踪新元素，您需要使用.on（）方法：

$('document').on('blur', '#box .entry input[type=text]', function() {
    //...
});

Answer 3

因为您还需要将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

jQuery没有删除附加项的下划线

3 个答案: