Генерировать динамическую строку каждый раз, фокусируясь на последнем элементе строки

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть одна таблица. Когда я фокусируюсь на последнем элементе строки, я хочу скопировать последнюю строку таблицы и добавить ее в последнюю позицию. Это я могу сделать в соответствии с моим кодом.

Теперь эта новая строка станет моей последней строкой. После этого я не могу генерировать строку при нажатии на ее элемент. Фактически он генерирует строку при нажатии на предыдущую строку (которая является последней ранее).

Как я могу этого добиться?

 $('.ankita').focus(function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>

Ответ №1:

Вам просто нужно создать прослушиватель событий делегирования, который будет реагировать только на события фокусировки из последней строки.

 $('#tbl').on('focus', 'tr:last .ankita', function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>

1. нам не нужно удалять class, если мы используем способ делегирования, потому что мы делегируем last tr всегда

2. @SandeepSaroha верно, это просто оставшаяся логика из исходного фрагмента, доступного для запуска операционной системы.

Ответ №2:

Анкита, тебе просто не хватает параметра метода clone

var $clone = $tr.clone(true);

этот параметр указывает, что обработчики событий в clone obj также будут скопированы.

 $('#tbl').on('focus', 'tr:last .ankita', function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone(true);
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>

1. Учитывая, что прослушиватель событий находится в таблице, какие события клонируются?

2. @taplar, в исходном коде в таблице нет прослушивателя. Прослушиватель находится на входе, который является частью clone obj.

3. Верно, но мое решение и ваше решение имеют это в таблице. Таким образом, хотя clone (true) выполняет то, что вы говорите, это необязательно

4. @taplar, сказанное верно для объекта-клона, и таблица не была частью объекта-клона 🙂 Я также добавил контекст в ответ

5. Ваш ответ также использует делегирование. В tr добавлено изменение clone (true), которое будет клонировать обработчики событий в tr, которые вообще не указаны в исходном вопросе как существующие.