0

伙计们，我正在尝试通过在第 10 行添加按钮来进行动态设计，以便在班级中添加学生！[在此处输入图像描述][1]

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

我可以添加一个带有按钮的新行，但是当我单击新按钮时，单击功能没有响应，我仍然需要单击第 10 行上的添加按钮来添加新按钮。

这是代码。

         <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>");
});
4

3 回答 3

2

当您使用 click() 函数注册事件时，它只会在此时选择器返回的对象上注册事件。如果事后创建对象，它不会绑定到事件。使用 on() 函数并给它你的选择器：http ://api.jquery.com/on/

例子：

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

于 2012-09-19T17:07:35.730 回答
0

我注意到的第一件事是您没有一个名为 .class 的按钮$('.add-bstudent')。它是按钮的名称属性。还可以考虑使用 .on() 委派事件，以便在元素可用时附加事件

于 2012-09-19T17:11:11.417 回答
0

试试这个

 $('.add-bstudent').click(function () {
        $(this).parent('table').append("<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>");
    });
于 2012-09-19T17:24:57.363 回答