如何在dynamicky插入的html上应用jQuery

下面是代码，作为我问题的一个示例：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script>
    $(document).ready(function(){    
         $("#temp").click(function(){       
           $("#temp").hide();            
         });

        $("#butt").click(function(){  
             $("#result").html("<div id=temp>Click to hide</div>")    
        });    
     });    
     </script>

     <button id=butt>Show text</button>
     <div id=result><!-- here goes generated html --> </div>

但是，尽管新插入的代码是

<div id=temp>test</div>

那为什么呢？为什么不能在最近插入的html上应用早期定义的函数？

$（“#butt”）。单击（函数（）{
$（“#结果”）.html（“单击以隐藏”）；
$（“#temp”）。单击（函数（）{
$（“#temp”）.hide（）；
});
});

如果您在中使用了标题

<div id=temp>test</div>

$("#temp").click(function(){..})

    $("#butt").click(function(){  
         $("#result").html("<div id=temp>Click to hide</div>") ;
           $("#temp").click(function(){       
           $("#temp").hide();            
     });
    });