Question

我有一些动态控件并且有数据，下面是动态控件的代码：

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

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


                var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' >"
                + tb_fromEducation + " to " + tb_ToEducation + "</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;
            });


        });
    </script>
<% end %>

这些控件是隐藏的，只有html按钮可见，如下：

<table>
      <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>

当我点击html按钮“ADD”时，它会显示控件。我希望在不点击按钮的情况下，控件应该是可见的。请帮助我。谢谢！

Answer 1

请勿使用click事件：

   $(document).ready(function() {


  $("input[value='ADD']").click(function(e)
        {
            e.preventDefault();
            //var field = $("#field").val();
            var tb_fromEducation = "<input type='text' style='width:50px' name='ParametersFromSch' value='<%= user_edu.SchoolFrom %>' />";

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


            var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' >"
            + tb_fromEducation + " to " + tb_ToEducation + "</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;
        });




            //var field = $("#field").val();
            var tb_fromEducation = "<input type='text' style='width:50px' name='ParametersFromSch' value='<%= user_edu.SchoolFrom %>' />";

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


            var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' >"
            + tb_fromEducation + " to " + tb_ToEducation + "</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;
        });


    });

//使用添加事件检查新小提琴

http://jsfiddle.net/4hmhr/

我忘了添加jQuery库，你最好从左侧添加

包括JQUERY在内的更新后果 http://jsfiddle.net/mEUed/

如何制作可见的隐藏控件？

1 个答案: