添加新表的腳本不起作用

Question

我有一個腳本可以向頁面動態添加新表，我從這個提琴手那里得到了這個腳本。
因此，這是我根據需要重建的腳本：

<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() {    
    //...
});

動態選擇器（標識將動態創建的內容）作為第二個參數傳遞。

現場測試用例。

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 個解決方案

解決方案1
1 2013-11-03 12:10:22

解決方案2
0 已采納 2013-11-03 12:18:03

添加新表的腳本不起作用

問題描述

2 個解決方案

解決方案1 1 2013-11-03 12:10:22

解決方案2 0 已采納 2013-11-03 12:18:03

解決方案1
1 2013-11-03 12:10:22

解決方案2
0 已采納 2013-11-03 12:18:03