Edit in JSFiddle

var list = [];
$("ul#list li").each(function(i) {
    list.push($(this).text());
});

$("button#delete").click(function() {
    $("ul#list").empty();
});

$("button#disp").click(function() {
    //
    if ($("ul#list li").size() <= 0) {
        for (var i = 0; i < list.length; i++) {
            var $li = $("<li>");
            $li.text(list[i]);
            $("ul#list").append($li);
        }
    }
});

//
$("ul#list").on("click", "li", function() {
    var t = $(this).text();
    $("p#res").text(t + "がクリックされた");
});

<div id="wrapper">
<p>削除ボタンをクリックすると表示ボタンが削除されるが再度追加した場合はイベントが引き継がれている</p>
<button id="delete">要素削除</button>
<button id="disp">要素追加</button>
<ul id="list">
    <li>イベント1</li>
    <li>イベント2</li>
    <li>イベント3</li>
    <li>イベント4</li>
</ul>
    <p id="res">クリックされた要素</p>
</div>

div#wrapper{
    width:400px;
    margin:30px auto;
}
div#wrapper p{
    margin-bottom:20px;
    font-size:11px;
}

div#wrapper button{
    margin-bottom:10px;
}
 
div#wrapper li{
    cursor:pointer;
    font-size:11px;
    line-height:1.4;
}

p#res{
margin-top:10px;
    padding:10px;
    background-color:#cfcfcf;
}