-2

Here is the code, as an example of my problem:

<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>

Question: why $("#temp").click(function(){..}) can't bee applied on newly generated html?

When I run this script, clicking on button, I get inserted code to

div *id=result*,

however, although the newly inserted code is 

<div id=temp>test</div>

it is be possible to control this element by function 

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

So why is that? Why it is not possible to apply early defined functions on lately inserted html?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
David
  • 1
  • if you had used the title in [google search](https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=active&q=How+to+apply+jQuery+on+dynamically+inserted+html&spell=1) – Arun P Johny Sep 11 '14 at 08:34

1 Answers1

0

DEMO

    $("#butt").click(function(){  
         $("#result").html("<div id=temp>Click to hide</div>") ;
           $("#temp").click(function(){       
           $("#temp").hide();            
     });
    });
Shijin TR
  • 7,516
  • 10
  • 55
  • 122