[解決済み] javascriptで動的要素にイベントをアタッチする

質問

動的に作成されるリストにhtmlデータを動的に挿入しようとしているのですが、動的に作成されるボタンにonclickイベントを付けようとするとイベントが発生しません。解決策があれば、本当にありがたいです。

Javascriptのコードです。

document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('btnSubmit').addEventListener('click', function () {
        var name = document.getElementById('txtName').value;
        var mobile = document.getElementById('txtMobile').value;
        var html = '<ul>';
        for (i = 0; i < 5; i++) {
            html = html + '<li>' + name + i + '</li>';
        }
        html = html + '</ul>';

        html = html + '<input type="button" value="prepend" id="btnPrepend" />';
        document.getElementsByTagName('form')[0].insertAdjacentHTML('afterend', html);
    });

    document.getElementById('btnPrepend').addEventListener('click', function () {
        var html = '<li>Prepending data</li>';
        document.getElementsByTagName('ul')[0].insertAdjacentHTML('afterbegin', html);
    });
});

HTMLコードです。

<form>
    <div class="control">
        <label>Name</label>
        <input id="txtName" name="txtName" type="text" />
    </div>
    <div class="control">
        <label>Mobile</label>
        <input id="txtMobile" type="text" />
    </div>
    <div class="control">
        <input id="btnSubmit" type="button" value="submit" />
    </div>
</form>

解決方法は？

これは、要素が動的に生成されることが原因です。そのため イベントデレゲーション を使用してイベントを処理します。

 document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

jqueryを使えば簡単です。

 $(document).on('click','#btnPrepend',function(){//do something})

イベントデリゲーションに関する記事はこちらです。 イベントデリゲーション記事