Question

i made a ajax that will make a table for input and the value will be from php with a button of active and in active

   var counter_sub = 0 ;

     var html;
              $.ajax({
                        type:'POST',
                        url:'add_subject.php',
                   dataType:'json',
                       data:{'func_numbr':'2'},
                    success:function (data){
                       $.each(data, function(i, item) {

                        html = "<tr>";

                        html += "<td><lable>Subject: </label><input type='text' name='subject["+counter_sub+"]' value='"+data[i].subj_name+"'></td>";
                        html += "<td><input type='button' id='activate' name='active' class='button active' value='Active'> ";
                        html += "<input type='button' id='inactivate' name='active' class='button' value='Inactive'></td>";
                        html += "</tr>";
               $('#curr-elem-tble').append(html);

               counter_sub = counter_sub +1;
              });
                    }     
             });

and i made a click event that will alert the value of the input beside it

$('.active').click(function (){

          var prev = $(this).parent().prev().find('input[type=text]');

            var val = $(prev).val();

          alert(val);
     });

but nothing happens when i click the active button next to it

heres the html

               <div id="curr-elem-content">
                  <table id="curr-elem-tble">

                  </table>
                </div>

Answer 1

click() will be bind to the elements which are all present when the time of loading. and note that if you want to use click() for dynamically added elements, you have to go for live() or on() method of jQuery… so change the code to

$('.active').live('click', function (){

          var prev = $(this).parent().prev().find('input[type=text]');

            var val = $(prev).val();

          alert(val);
     });

See here for live