而通过javascript添加行添加下拉列表不起作用

while adding dropdown list through javascript add row is not working

本文关键字：添加 下拉列表 不起作用 添加行 javascript      更新时间：2023-09-26

我正在通过jquery向html添加行。当我在jquery中添加了"下拉列表"时，添加行停止工作。它非常适合输入类型"text"。有人能建议：http://jsfiddle.net/znFmc/12/

HTML

<body>
    <div id="page_container">
        <div class="form_container">
            <h3>Add and Delete rows dynamically with textboxes using jQuery:</h3>
            <table id="expense_table" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>Sl. No</th>
                        <th>Mode</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="reg_no_01" maxlength="10" required /></td>
                        <td>
                        <select name="mode" maxlength="10" required />
                            <option value="Select"selected>Select</option>
                            <option value="Auto">Auto</option>
                            <option value="Car">Car</option>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
            <input type="button" value="Add Row" id="add_ExpenseRow" />
        </div> <!-- END subject_marks -->
        <div class="clearfix"></div>
    </div>
    <!-- FOOTER -->
    <a class="mm" href="http://mediamilan.com/" title="Go to Media Milan.com" target="_blank"></a>
</body>

jQuery

$(function(){
    // GET ID OF last row and increment it by one
    var $lastChar =1, $newRow;
    $get_lastID = function(){
        var $id = $('#expense_table tr:last-child td:first-child input').attr("name");
        $lastChar = parseInt($id.substr($id.length - 2), 10);
        console.log('GET id: ' + $lastChar + ' | $id :'+$id);
        $lastChar = $lastChar + 1;
        $newRow = "<tr> '
                    <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> '
                    <td><select name='subjects_0"+$lastChar+"' maxlength='10' /><option value="Select"selected>Select</option><option value="Auto">Auto</option> <option value="Car">Car</option></td> '
                    <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> '
                </tr>"
        return $newRow;
    }
    // ***** -- START ADDING NEW ROWS
    $('#add_ExpenseRow').on("click", function(){ 
        if($lastChar <= 9){
            $get_lastID();
            $('#expense_table tbody').append($newRow);
        } else {
            alert("Reached Maximum Rows!");
        };
    });
    $(".del_ExpenseRow").on("click", function(){ 
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
    }); 
});

此处的字符串格式不正确：

$newRow = "<tr> '
                <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> '
                <td>
                    <select name='subjects_0"+$lastChar+"' maxlength='10' /> '
                        <option value="Select"selected>Select</option> '
                        <option value="Auto">Auto</option> '
                        <option value="Car">Car</option></td> '
                <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> '
            </tr>"

替换为：

$newRow = "<tr> '
                <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> '
                <td>
                    <select name='subjects_0"+$lastChar+"' maxlength='10' /> '
                        <option value='Select' selected>Select</option> '
                        <option value='Auto'>Auto</option> '
                        <option value='Car'>Car</option></td> '
                <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> '
            </tr>"

如果你打开浏览器的控制台，你会看到一个Uncaught SyntaxError: Unexpected identifier错误，通知你这个问题，并指向那一行。

此外，正如A.Wolff建议的那样，替换：

$(".del_ExpenseRow").on("click", function(){

带有：

$(document).on("click", ".del_ExpenseRow", function(){

这样可以确保在页面加载后添加的元素具有所需的事件处理程序
（有关委派事件的更多信息，请参阅jQueryapi）

相关文章：