javascript - 如果其中的内容被删除，则向 DIV 提供新代码

Question

我想知道在 jQuery/JS 中是否可行:

如果“foobar”从 HTML 代码中删除或消失

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

我想自动添加"new"

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

当有人从#line2 中删除“foobar”时，我希望显示“new”。这是为了归属目的。

Answer 1

如果您将文本作为输入的值，您可以绑定(bind)到它的 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/