adding <tr> to table using jquery + keep jquery function on added rows

Question

I got a table where I want to add additional rows when clicking on a selector on the end of the row. I found a solution here: jQuery Clone table row

The pure clone of the row is perfekt. But afterwords I can't clone the clone with clicking on the selector of the end of the cloned row. I only does clone when I klick on a selector of a row which is hardcoded and not cloned.

Here is the code of the html/php:

            <table  class="table table-bordered table-hover">
            <tr>
                <th id="col1">Datum / Anzahl</th>
                <th id="col2">Text</th>
                <th id="col3">Einzelpreis</th>
                <th id="col4">Gesamtpreis</th>
            </tr>

        <!-- Einzelpositionen -->
            <tr>
                <td align="left" class="editCell">
                    <span class="input">
                        <input type="text" value="<?php echo $eventDatum ?>">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </span>
                </td>
                <td align="left" class="editCell">
                    <span class="input">
                        <input type="text" value="<?php echo $eventTxt ?>">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </span>
                </td>
                <td align="right" class="editCell">
                    <span class="input">
                        <input type="text" text-align="right" value="<?php echo $ePreis ?>">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </span>&nbsp;<?=$waehrung ?>
                </td>
                <td align="right" class="editCell">
                    <span class="input">
                        <input type="text" text-align="right" value="<?php echo $gPreis ?>">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </span>&nbsp;<?=$waehrung ?>

                </td>
                <td class="no-border">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true">plus</span>
                </td>
            </tr>


        <!-- Summen und MwSt -->    
            <tr>
                <td align="right" colspan="3">Zwischensumme</td>
                <td align="right">
                    <span class="text"><?php echo $nettoSum ?></span>
                    <span class="input">
                        <input type="hidden" text-align="right" value="<?php echo $nettoSum ?>">
                    </span>&nbsp;<?=$waehrung ?>
                </td>
            </tr>
            <tr>
                <td align="right" colspan="3">Mehrwertsteuer 19%</td>
                <td align="right">
                    <span class="text"><?php echo $vat ?></span>
                    <span class="input">
                        <input type="hidden" text-align="right" value="<?php echo $vat ?>">
                    </span>&nbsp;<?=$waehrung ?>
                </td>
            </tr>
            <tr>
                <th style="text-align: right !important" colspan="3">Rechnungsbetrag</th>
                <th style="text-align: right !important">
                    <span class="text"><?php echo $bruttoSum ?></span>
                    <span class="input">
                    <input type="hidden" text-align="right" value="<?php echo $bruttoSum ?>">
                    </span>&nbsp;<?=$waehrung ?>
                </th>
            </tr>
        </table>

And here the code of the jquery:

    $('.glyphicon-plus').click(function() {
    var $tr    = $(this).closest('tr');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $clone.find('span.text').after('-kopie');
    $tr.after($clone);

});

My fist entry on fiddle will hopefully work ;-) http://jsfiddle.net/8v35m2c1/

Hope to get some ideas. The code are just parts of my original files ;-)

Cheers, Chris

Answer 1

As said in the jQuery Clone doc :

.clone( [withDataAndEvents ] )

withDataAndEvents (default: false)

Type: Boolean

A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

So passing true as argument to clone will do exactly what you want :

$('.glyphicon-plus').click(function() {
    var $tr    = $(this).closest('tr');
    var $clone = $tr.clone(true);
    $clone.find(':text').val('');
    $clone.find('span.text').after('-kopie');
    $tr.after($clone);
    
});

http://jsfiddle.net/8v35m2c1/2/

Answer 2

You need to use the on function instead of click to ensure that new rows also get the event handler:

$('table').on('click', '.glyphicon-plus', function() {
    var $tr    = $(this).closest('tr');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $clone.find('span.text').after('-kopie');
    $tr.after($clone);
});

Update fiddle

Answer 3

When you bind to the DOM in jQuery using .click it only binds elements that currently exist.

For live binding (i.e. applies to elements added after the binding is defined) you need to use .on.

$( "table" ).on( "click", ".glyphicon-plus", function() {
    //...
});

jQuery on documentation.