tableのtr削除するとき、モーダルウィンドウを表示し、削除できるようにしたい。

tableのtr削除するとき、モーダルウィンドウをだして削除できるようにはなったのですが、tableのセルをしてdeleteボタンを押しても何も反応がなかった。(エラーも出ていなかった)
【ソース】

HTML
1<html>
2<head>
3    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
4    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
5    <link href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet'>
6</head>
7
8<body>
9    <div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
10        <div class='modal-header'>
11            <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
12            <h3 id='myModalLabel'>delete</h3>
13        </div>
14        <div class='modal-body'>
15            <p>this is will delete now. ok?</p>
16        </div>
17        <div class='modal-footer'>
18            <button class='btn' data-dismiss='modal' aria-hidden='true'>NO</button>
19            <button data-dismiss='modal' class='btn btn-danger' id='btnYes'>YES</button>
20        </div>
21    </div>
22    <table align='center'>
23        <tbody id='sample1_table'>
24            <tr>
25                <td>
26                    <input type='text' />
27                    <br />
28                    <textarea style='resize: vertical;' name='commentInfo.message' class='form-control' rows='6' cols='95' maxlength='100'></textarea>
29                    <br />
30                    <button onclick='insertRow(1);' class='btn btn-success'>ADD</button>
31                    <button class='confirm-delete btn btn-danger red-stripe' role='button' data-id='1'>DELETE</button>
32                </td>
33            </tr>
34        </tbody>
35    </table>
36
37    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
38    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
39    <script type='text/javascript'>
40        function insertRow(num) {
41            var table = document.getElementById('sample1_table');
42            var row = table.insertRow(num);
43            var cell1 = row.insertCell(-1);
44            var row_len = table.rows.length;
45            console.log(row_len);
46            cell1.innerHTML = "<input type='text' />"
47                    + "<br />"
48                    + "<textarea style='resize: vertical;' name='commentInfo.message' class='form-control' rows='6' cols='95' maxlength='100'></textarea>"
49                    + "<br />"
50                    + "<button onclick='insertRow(" + row_len + ");' class='btn btn-success'>ADD</button> "
51                    + "<button class='confirm-delete btn btn-danger red-stripe' role='button' data-id='" + row_len + "'>DELETE</button>";
52        }
53            $('.confirm-delete').on('click', function (e) {
54                var id = $(this).data('id');
55                $('#myModal').data('id', id).modal('show');
56            });
57
58            $('#btnYes').click(function () {
59                // handle deletion here
60                var id = $('#myModal').data('id');
61                $('[data-id=' + id + ']').parents('tr').remove();
62                $('#myModal').modal('hide');
63            });
64
65    </script>
66</body>
67</html>
68※ソースはそのまま直で実行結果が見れるようになっています。

【画面】

ADDボタンを押すと、以下のように全く同じtableのtr要素を増やせます。

上のtr要素のDELETEボタンを押すとモーダルウィンドウがでてきますが、ADDボタンをおして増やしたtr要素のDELETEボタンを押しても何も反応しません。ただ単にJavascriptの処理が追いついていないのか、JQueryのソースと普通のJavascritpのソースの実行順が違うのかよくわかりません。ADDボタンで増やした下のtr属性のボタンを押しても何も反応しないのか。何かわかる方お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

増やしたボタンにはイベントが載っていないので。

JavaScript
1// $( '.confirm-delete' ).on( 'click', function (e) {/*略*/} );
2// ↓
3   $( '#sample1_table' ).on( 'click', '.confirm-delete', function (e) {/*略*/} );