如果删除了 DIV 中的内容，则向 DIV 提供新代码

Question

我想知道在jQuery/JS中是否可能：

如果"foobar"被删除或从HTML代码中消失

<div id="foo">
 <div id="line1">...</div>
 <div id="line2">foobar</div>
</div>

我想自动添加"新">

<div id="foo">
 <div id="line1">...</div>
 <div id="line2">new</div>
</div>

我希望当有人从 #line2 中删除"foobar"时显示"新"。这是出于归因目的。

Answer 1

如果将文本设置为输入的值，则可以绑定到其change事件：

<div id="foo">
   <div id="line1">...</div>
   <div id="line2"><input type="text" value="foobar" /></div>
</div>
$('#line2').children('input').on('change', function () {
    var $this = $(this);
    if ($this.val() == '') {
        $this.val('new');
    }
});

这是一个演示：http://jsfiddle.net/u9Twu/

请注意，如果要以编程方式更改输入的值，则必须在更改输入的值后手动调用输入.trigger('change')，以便change事件处理程序运行。

另请注意，.on() 是 jQuery 1.7 中的新功能，在这种情况下与 .bind() 相同。

更新

var $foo   = $('#foo'),
    $line2 = $foo.children('#line2');
if ($line2.length == 0) {
    //no #line2 element is found
    $foo.append('<div id="line2">new</div>');
} else if ($line2.text().length == '') {
    //#line2 element is empty
    $line2.text('new');
} else if ($line2.text() != 'foobar') {
    //#line2 element does not contain only the string: foobar
    $line2.text('new');
}

这是一个演示：http://jsfiddle.net/u9Twu/1/

Answer 2

$('#foo').click(function() {
    $('#line2').remove();
    $(this).append('<div id="line3">new foobar</div>');
})

http://jsfiddle.net/y5FDs/