关于jquery append的对象没法进行hide操作

关于jquery append的对象无法进行hide操作
这是append的代码

<script type="text/javascript">
    $("#submit1").click(function () {
    var divCard = '<div class="col-lg-3 col-md-4 col-sm-6"><div class="card"><div class="card-main"><div class="card-inner"><p class="card-heading">'+$("#name").val()+'</p><p>'+$("#tele").val()+'</p></div><div class="card-action"><ul class="nav nav-list pull-left"><li class="delete1"><a href="javascript:void(0)"><span class="icon">delete</span></a></li></ul></div></div></div></div>';
     $("div#tongxunluliebiao").append(divCard);
     $.post("/addtelephone",{contact:$("#name").val(),telnumber:$("#tele").val()});
     });
</script>

这是hide的代码
    <script>
     $("li.delete1").on("click",function(){
         var contactName = $(this).parents("div.col-lg-3.col-md-4.col-sm-6")
         .children("div.card").children("div.card-main").children("div.card-inner")
         .children("p.card-heading").text();
         $.post("/deletecontact",{id:contactName})
         $(this).parents("div.col-lg-3.col-md-4.col-sm-6").hide('slow');         
     });
</script>

------解决思路----------------------
在你 append 之前，页面中有 <li class="delete1"> 这样的标记吗？
on 只作用于已存在（包括后期添加）的 标记上

$("li.delete1").on("click",function(){
应写作
$(document).on("click","li.delete1",function(){
或
$("div#tongxunluliebiao").on("click","li.delete1",function(){ //可能有的浏览器不支持