Question

我有一个脚本可以动态添加新表格，我从this fiddler获取了这个脚本所以，这是我的脚本重建与我的需求：

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Order event page</title>

            <!-- Bootstrap css responsive-->
            <link href="resources/css/bootstrap.css" rel="stylesheet">
            <link href="resources/css/bootstrap-responsive.css" rel="stylesheet">


            <!-- JQuery and Bootstrap file-->
            <script src="resources/js/jquery-1.10.2.min.js"></script>
            <script src="resources/js/bootstrap.min.js"></script>
            <script src="resources/js/jquery.scrollTo.js"></script> 
            <script src="resources/js/jquery.nav.js"></script>


            <script type="text/javascript">         
                $(function() {  
                    var countEventTable = $('#eventDiv');
                    var tableNumber = ('#eventDiv table').size() + 1;

                    $('#addEventBtn').live('click', function() {    
                        $('<table id="eventTable"><tr><td>Event type:</td><td><select name="event_type"><option>Choose event type</option><option>Computer Maintenance Event</option><option>Software Development Event</option></select></td></tr><tr><td>Event date:</td> <td><input type="text" class="span2" name="user_event_date"></td></tr><tr><td>Event description:</td> <td><textarea rows="5" name="description"></textarea></td></tr><tr><td>Additional Info:</td> <td><input type="text" class="span2" name="additional_info"></td></tr></table>').appendTo(countEventTable);  
                        tableNumber++;              
                        return false;
                    }); 
                }); 
            </script>
        </head>
        <body>
            <h1>New user</h1>

            <a href="#" id="addEventBtn"> Add Event Button </a>

            <div id="eventDiv" align="center">          

                <table id="eventTable">

                    <tr><td>Event type:</td><td>
                        <select name="event_type">
                            <option>Choose event type</option>
                            <option>Computer Maintenance Event</option>
                            <option>Software Development Event</option>
                        </select>
                    </td></tr>
                    <tr><td>Event date:</td> <td><input type="text" class="span2" name="user_event_date"></td></tr>
                    <tr><td>Event description:</td> <td><textarea rows="5" name="description"></textarea></td></tr>
                    <tr><td>Additional Info:</td> <td><input type="text" class="span2" name="additional_info"></td></tr>
                </table>
            </div>

            <form action="new-user-event" method="post">
                    <input type="hidden" name="userSessionId" value="${userSessionId}">
                <table align="center">
                    <tr><td>First name:</td> <td><input type="text" class="span2" name="first_name"></td></tr>
                    <tr><td>Last name:</td> <td><input type="text" class="span2" name="last_name"></td></tr> 
                    <tr><td>E-male:</td> <td><input type="text" class="span2" name="e_male"> </td></tr>
                    <tr><td>Address:</td> <td> <input type="text" class="span2" name="address"></td></tr>
                    <tr><td>Phone number:</td> <td> <input type="text" class="span2" name="phone_number"></td></tr>

                    <tr><td><input type="submit" value="Regester user"></td></tr>
                </table>
            </form>
        </body>
    </html>

感觉我是jQuery和JavaScript的新手，请告诉我为什么我可以添加新表，为什么脚本不起作用？

Answer 1

正如评论中所说，.live()从jQuery 1.7开始被删除，删除从版本1.9开始，因此你会收到错误。请改用.on()，注意它有点不同：

$(document).on('click', '#addEventBtn', function() {    
    //...
});

动态选择器（识别将动态创建的内容）作为第二个参数传递。

Live test case

Answer 2

将size()更改为length，并且Shadow Wizard表示使用on()。

 var tableNumber = ('#eventDiv table').length + 1;
$(document).on('click','#addEventBtn', function() { //code here });

演示http://jsfiddle.net/V2p7x/

添加新表的脚本不起作用

2 个答案: