Question

guys im trying to make a dynamic design for adding students in a class with a button add on the 10th row ![enter image description here][1]

http://www.facebook.com/photo.php?fbid=4099710263250&set=a.1210298669766.32621.1597725369&type=3&theater

i can append a new row with a button on it but when i click the new button the click function did not respond and i still need to click the add button on the 10th row to add new one.

here is the code.

         <table>
            <th colspan="4"><h2>Boys</h2></th>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname1" class="input">
              </td>
              <td>
                <input type="text" name="bstudnt_mname1" class="input">
              </td>
              <td>
                <input type="text" name="bstudnt_fname1" class="input">
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname2" class="input">
              </td>
              <td>
                <input type="text" name="bstudnt_mname2" class="input">
              </td>
              <td>
                <input type="text" name="bstudnt_fname2" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname3" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname3" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname3" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname4" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname4" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname4" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname5" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname5" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname5" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname6" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname6" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname6" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname7" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname7" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname7" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname8" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname8" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname8" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname9" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname9" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname9" class="input" >
              </td>  
            </tr>
            <tr>
              <td>
                <label>Name:</label>
              </td>
              <td>
                <input type="text" name="bstudnt_lname10" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_mname10" class="input" >
              </td>
              <td>
                <input type="text" name="bstudnt_fname10" class="input" >

                <input type="button" id="" name="add_bstudent" class="button add-        bstudent" value="+">
              </td>  
            </tr>              
          </table>

JS….

$('.add-bstudent').click(function () {
    $(this).parent().parent().after("<tr><td><label>Name:</label></td><td>  <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});

Answer 1

When you use the click() function to register the event, it will only register the event on objects returned by the selector at that moment. If you create an object after the fact, it won’t bind to the event. Use the on() function and give it your selector: http://api.jquery.com/on/

Example:

$('#container').on('click', '.add-bstudent', function(event) { ... });