An append in jquery code and click function?

Question

This is my following test.html file

<!DOCTYPE html>
    <html>
      <head>
          <style>
              p { 
                  background:yellow; 
              }
              .content{
                  width:40px;
                  margin:0px 30px;
              }
          </style>
          <script src="http://code.jquery.com/jquery-latest.js"></script>
          <script>
              $(document).ready(function(){
                  $('#test').click(function(){
                     // alert("test");
                     var htmlData='<div class="resizable" ><div class="content">test</div></div>';
                     $('.container').append(htmlData);
                  });
                  $('.content').click(function(){
                     alert("test");
                  });
              });
          </script>
     </head>
     <body>
         <div class="container">
             <div class="resizable" >
                 <div class="selected content">Time</div>
                 <button type="button" id="test">Click Me!</button>
             </div>
         </div>
    </body>
</html>

When i click on the button a div is appended i have also class content on which click function is written which called alert.The jquery click function for content class does calls to the the content class which is hardcode but no for the content class which is appended by the click function of buttton.

score 0 · Accepted Answer · answered Oct 05 '11 at 08:32

0

You need to use live function for DOM elements created dynamically - http://api.jquery.com/live/

$('.content').live('click', function(){
   alert("test");
});

answered Oct 05 '11 at 08:32

matino

17,199
8
49
58

score 0 · Answer 2 · answered Oct 05 '11 at 08:44

0

$("body").delegate("#test", "click", function(){
      //write your code here
});

answered Oct 05 '11 at 08:44

Ariful Islam

7,639
7
36
54

An append in jquery code and click function?

2 Answers2

Linked