0

我有脚本可以动态添加一个新表来进行分页，我从这个 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 的新手，请告诉我为什么我可以添加新表，为什么脚本不起作用？

4

2 回答 2

1

正如评论中所说.live()，自 jQuery 1.7 起已弃用，自1.9 版起已被删除，因此您会收到错误消息。改为使用.on()并注意它有点不同：

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

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

现场测试用例。

于 2013-11-03T12:10:22.600 回答
0

改成size()和length影法师所说的一样使用on()。

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

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

于 2013-11-03T12:18:03.290 回答