0

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

Community
  • 1
  • 1
Chris
  • 5
  • 1

3 Answers3

2

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/

Community
  • 1
  • 1
Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
0

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.

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • your solution works as well as the on of 'Rhumborl' - THANKS!! – Chris Nov 17 '14 at 20:52
  • @Chris - to be fair, in your particular case, Karl's answer is best as it simply means adding `true` to your call to the `clone` method. My answer is the more general case of "I'm adding stuff to the page and want the events bound". – Fenton Nov 17 '14 at 20:55
0

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

Rhumborl
  • 16,349
  • 4
  • 39
  • 45