Question

下面有两个html表：

<table id="Schools" align="center" valign="top">
      <tr>
         <td align="center">
            <table id="SchoolControls" cellpadding="10" cellspacing="10">
            </table>
            <table id="ControlsSch" cellpadding="10" cellspacing="10">
            </table>
            <input id="AddSch" type="button" value="Add" />
         </td>
      </tr>
</table>

我正在使用这些表格在其中创建动态控件，即

<% @user_education.each do |user_edu| %>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#AddSch").click(function() {
                var field = $("#field").val();
                var DDL_fromProfession = "<input type='text' style='width:50px' name='ParametersFromSch' value='<%= user_edu.SchoolFrom %>' />";

                var DDL_ToProfession = "<input type='text' style='width:50px' name='ParametersToSch' value='<%= user_edu.SchoolTo %>' />";


                var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' >"
                + DDL_fromProfession + " to " + DDL_ToProfession + "</td></tr>"
                + "<tr><td align='center' style='font-size:large;color:#212121;' >"
                newRow1 += "<input type='button' class='btn_rmvsch' value='Remove'/></td></tr>";


                var input1 = "<input name='parametersSch' id='field' type='text' value='<%= user_edu.SchoolName %>' />"
                var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' >" + input1 + "</td></tr>";
                $('#ControlsSch').append(newRow);
                $('#ControlsSch').append(newRow1);
            });

            $('#ControlsSch').on('click', '.btn_rmvsch', function() {
                var index = $(this).closest('tr').index() + 2
                $('#ControlsSch tr:nth-child(n+' + (index - 3) + ')').remove();
                return false;
            });
            $('#<%= SchoolControls.ClientID %>').on('click', '.btn_rmvsch1', function() {
                var index = $(this).closest('tr').index() + 2
                $('#<%=SchoolControls.ClientID %> tr:nth-child(n+' + (index - 3) +           ')').remove();
                return false;
            });
        });
    </script>
<% end %>

但是我在此行$('#<%= SchoolControls.ClientID %>').on('click', '.btn_rmvsch1', function()

收到以下错误错误

设置中的NameError＃new

未初始化的常量ActionView :: CompiledTemplates :: SchoolControls

Kidle帮助我解决它，等待你的回复。感谢

Answer 1

您需要更改：

$('#<%= SchoolControls.ClientID %>')

为：

$('#SchoolControls')

所以你需要使用：

$('#SchoolControls').on('click', '.btn_rmvsch1', function() {

和

$('#SchoolControls tr:nth-child(n+' + (index - 3) + ')').remove();

Answer 2

您已正确委派了该事件，但选择器似乎有误，请尝试以下方法：

$('#SchoolControls')

而不是：

 $('#<%= SchoolControls.ClientID %>')

jquery不适用于动态控件

2 个答案: