javascript - jQuery 不删除附加项的下划线

Question

Demo fiddle

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

你应该使用事件委托(delegate)。

使用.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() 是 attach and forget 而 .on() 是动态的。