以下のようにCMSのようなものを作っているのですが、id="ul"の内部にある「消す」や「追加する」のところだけ、javascriptが効きません。どのようにしたら、動きますでしょうか。
詳しい方、ご教示頂けると幸いです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>記事投稿画面</title>
</head>
<body>
    <div id="container">
        <h1>記事の投稿画面</h1>
        <form id="form" method="post" name="insert" action="" enctype="multipart/form-data">    
            <ul>
                <ul id="ul" >
                    <li class="button menu"><a id="title" class="btn_group" onclick="onClick('title')">大見出し</a></li>
                    <li class="button menu"><a id="h3" class="btn_group" onclick="onClick('h3')">中見出し</a></li>
                    <li class="button menu"><a id="img" class="btn_group"onclick="onClick('img')">画像</a></li>
                    <li class="button menu"><a id="text" class="btn_group" onclick="onClick('text')">テキスト</a></li>
                    <li><input type="hidden" name="type[]" value="text"><textarea name="content[]" style="width:400px;height:300px;"></textarea><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a></li>
<li><input type="hidden" name="type[]" value="text"><textarea name="content[]" style="width:400px;height:300px;"></textarea><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a></li>
                </ul>
            <li><input type="submit" value="Submit" id="senddiv"></li>
            </ul>
        </form>
    </div><!--.container-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        function getHtmlByType(type) {
            if(type == 'title'){
                var html = '<input type="hidden" name="type[]" value="title"><input name="content[]' + '" type="text" placeholder="大見出し" style="width:400px;height:20px;margin-top:10px;"><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
            }

            if(type == 'h3'){
                var html = '<input type="hidden" name="type[]" value="h3"><input name="content[]' + '" type="text" placeholder="中見出し" style="width:400px;height:20px;margin-top:10px;"><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
            }

            if(type == 'img'){
                var html = '<input type="hidden" name="type[]" value="img"><input name="content[]' + '" type="text" placeholder="参照画像のURL" style="width:400px;height:20px;margin-top:10px;"><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
            }

            if(type == 'text'){
                var html = '<input type="hidden" name="type[]" value="text"><textarea name="content[]' + '" style="width:400px;height:300px;"></textarea><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';  
            }

            return html;
        }

        function bindEvents(elem) {
            $('a.del', elem).on('click', function() {
                elem.remove();
            });
            $('a.edit', elem).on('click', function() {
                var aa=$('<ul class="new_elem"><li class="button menu"><a class="title btn_group">大見出し</a></li><li class="button menu"><a class="h3 btn_group">中見出し</a></li><li class="button menu"><a class="img btn_group" >画像</a></li><li class="button menu"><a class="text btn_group">テキスト</a></li></ul>');
                aa.insertAfter(elem);

                $('a.title', aa).on('click', function() {
                    aa.remove();
                    aa = $('<li>'+getHtmlByType('title')+'</li>');
                    aa.insertAfter(elem);
                    bindEvents(aa);
                });
                $('a.h3', aa).on('click', function() {
                    aa.remove();
                    aa = $('<li>'+getHtmlByType('h3')+'</li>');
                    aa.insertAfter(elem);
                    bindEvents(aa);
                });
                $('a.img', aa).on('click', function() {
                    aa.remove();
                    aa = $('<li>'+getHtmlByType('img')+'</li>');
                    aa.insertAfter(elem);
                    bindEvents(aa);
                });
                $('a.text', aa).on('click', function() {
                    aa.remove();
                    aa = $('<li>'+getHtmlByType('text')+'</li>');
                    aa.insertAfter(elem);
                    bindEvents(aa);
                });
             });
        }

        function onClick(type){
            var html = getHtmlByType(type);
            var elem = $('<li>'+html+'</li>');
            $('#ul').append(elem);

            bindEvents(elem);    
        }
    </script>
</body>
</html>