динамическое удаление строк не работает

Question

динамическое удаление строк не работает

0

Я создал динамическое добавление и удаление строки в html. Дополнение строк работает, но удаление не работает. Никакая ошибка даже не генерирует. Также тестируется в jsfiddle. см. следующую ссылку для кодов: http://jsfiddle.net/znFmc/2/ Спасибо заранее.

<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>Month</th>


                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="reg_no_01" maxlength="10" required /></td>
                        <td><input type="text" name="subjects_01" maxlength="10" required /></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>
    <footer> <p>Developed by : Miteshan Patel</p>   </footer>

</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><input type='text' name='subjects_0"+$lastChar+"' maxlength='10' /></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;
    }); 
});

user3522349 16 апр. 2014, в 07:30

Источник

Теги:

jquery

html

2 ответа

1

Ваш javascript запускается и применяет обработчик кликов к каждой найденной кнопке Delete. Сначала нет кнопок "Удалить", поэтому никаких обработчиков не подключаются.

Когда вы добавляете кнопку "Удалить", скрипт для добавления обработчиков уже запущен. Новая кнопка не добавляет обработчик.

Вы должны прикрепить свой обработчик Delete к таблице и делегировать обработчик. Это будет эффективно прикреплять его к любой добавленной кнопке Delete.

$("#expense_table").on("click",'.del_ExpenseRow' function(){ 
    $(this).closest('tr').remove();
    $lastChar = $lastChar-2;
});

user1864610 16 апр. 2014, в 02:13

0

Спасибо за ответ.
user3522349 16 апр. 2014, в 07:12

Ещё вопросы

Sharang Dashputre · Accepted Answer · 2014-04-16T03-51-00.000Z

Исправлено: http://jsfiddle.net/znFmc/4/

$(document).on("click", ".del_ExpenseRow", function(){ 
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
});

Посмотрите, как работает .on(). Вы должны привязать событие к элементу, который НЕ будет добавляться динамически