jQueryで、.htmlで追加した要素に.onイベントが効かない

jQuery1.9の現象なのかわかりませんが、予め設定しておいたイベントが、後からjQuery.html()で追加した要素に効かないという現象がありました。

1.8ぐらいのときに、.click(function(){})でこのようなことが言われて、.liveを使おうだの.onだの.delegateだのとあって、.onで落ち着いたのかと思いましたが。
jQuery2とかだと解消しているんでしょうか。

同じようなこと(.on("click"))ばかり書いていてわかりにくいですが、下記のようなコードになります。

```js:on.js
$(document).ready(function() {
    // [1]
    $("#def").on("click", function(){
        alert("def");
    });

    // [2]
    $("#appendalert").on("click", function() {
        $("#appended").append(
            $("<input />")
                .attr("type","button")
                .attr("id","appended")
                .val("appended")
        )
    });

    $("#appended").on("click", function() {
        alert("appended");
    });

    // [3]
    $("#createbutton").on("click", function() {
        $("#createbuttonhtml").html(
            'createbuttonhtml<input type="button" id="createdhtml" value="createdhtml" />'
        );
    });

    $("#createdhtml").on("click", function() {
        alert("createdhtml");
    });
});
```

表示はこちら。
![88f9014efe16da20c5ac1f6e646e2b60.png](https://qiita-image-store.s3.amazonaws.com/0/28556/f0f73874-d212-a0ef-8632-85013d5c920e.png)


[1]id:defの要素に、直接オンクリックイベントを設定しておくと、もちろん実行されます。defボタンを押すと、「def」とアラートが出ます。
![fe3c0c6210ce407be49d75a2fd479a0e.png](https://qiita-image-store.s3.amazonaws.com/0/28556/cf741575-ae05-830e-f110-c0b68ca0eca6.png)

[2]「appendalert」というボタンを押すと、「appended」というid:appendedのボタンを **.appendで** 作ります。
ページ読み込み時に、id:appendedにオンクリックイベントを設定しておきます。
このとき作成されたid:appendedのボタンを押すと、オンクリックイベントが実行されます。
![03c68c277d628b8677b9020c6bdb6242.png](https://qiita-image-store.s3.amazonaws.com/0/28556/f74038f5-0ca0-3aeb-c7b9-d42f7150c6af.png)

[3]「createbutton」というボタンを押すと、「createdhtml」というボタンを **.htmlで** 作ります。
ページ読み込み時に、id:createdhtmlにオンクリックイベントを設定しておきます。
このとき作成されたid:createdhtmlのボタンを押しても、オンクリックイベントが **実行されません** 。。
![88f9014efe16da20c5ac1f6e646e2b60.png](https://qiita-image-store.s3.amazonaws.com/0/28556/e2300397-2135-7a96-2fb6-63e38caa1c8e.png)

悲しい。何のための.onなのか。
.htmlメソッドってこういうものなのでしょうか。
この問題で検索する時に、onもhtmlも一般語過ぎて引っかからない。

HTML全文はこちら。

```html:on.html
<html>
<head>
<script src="./jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    // [1]
    $("#def").on("click", function(){
        alert("def");
    });

    // [2]
    $("#appendalert").on("click", function() {
        $("#appended").append(
            $("<input />")
                .attr("type","button")
                .attr("id","appended")
                .val("appended")
        )
    });

    $("#appended").on("click", function() {
        alert("appended");
    });

    // [3]
    $("#createbutton").on("click", function() {
        $("#createbuttonhtml").html(
            'createbuttonhtml<input type="button" id="createdhtml" value="createdhtml" />'
        );
    });

    $("#createdhtml").on("click", function() {
        alert("createdhtml");
    });
});
</script>
</head>
<body>
[1]
<div>
<input type="button" id="def" value="def" />
</div>

<br />
[2]

<div>
<input type="button" id="appendalert" value="appendalert" />
</div>

<div id="appended">
    appendalert
</div>

<br />
[3]
<div>
<input type="button" id="createbutton" value="createbutton" />
</div>

<div id="createbuttonhtml">
    createbuttonhtml
</div>

</body>
</html>
```