Javascript 用于添加新表的脚本不会'；行不通_Javascript_Jquery_Html

Javascript 用于添加新表的脚本不会'；行不通

javascript jquery html

Javascript 用于添加新表的脚本不会'；行不通,javascript,jquery,html,Javascript,Jquery,Html,我有一个脚本，可以向may页面动态添加一个新表，我从中获取了此脚本。下面是我的脚本重建和我的需要： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Order event page</title> <!-- Bo

我有一个脚本，可以向may页面动态添加一个新表，我从中获取了此脚本。
下面是我的脚本重建和我的需要：

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


订单事件页面
$（函数（）{
var countEventTable=$（'#eventDiv'）；
var tableNumber=（'#eventDiv table'）.size（）+1；
$（'#addEventBtn'）.live（'click'，function（）{
$（“事件类型：选择事件类型计算机维护事件软件开发事件日期：事件描述：其他信息：”）.appendTo（countEventTable）；
tableNumber++；
返回false；
}); 
}); 
新用户
事件类型：
选择事件类型
电脑维修活动
软件开发活动
活动日期：
事件描述：
其他信息：
名字：
姓氏：
电子男：
地址:
电话号码：

如果我在jQuery和JavaScript中是新的，请告诉我为什么我可以添加新表，为什么脚本不工作？

如注释中所述，从jQuery 1.7开始被删除，从版本1.9开始被删除，因此您会得到错误。改用

.on（）

，注意它有点不同：

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

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

将

size（）

更改为

length

，如阴影向导所说，使用

on（）

Demo

我认为这是因为

.live（..

已被弃用。这会阻止您的按钮工作。只需使用

.on（..

）按钮，该按钮已在页面上。live已被弃用..使用.on（）或.delegate（）谢谢你们的回复。嗯？好的，这是一个不推荐使用的函数，但似乎它仍然不起作用？可能还有其他错误吗？使用.length而不是size。从jQuery 1.8开始，.size（）方法就不推荐使用了。谢谢先生的回答

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