Question

I have a link which adds a <tr> dynamically with JQuery, but my <tr> contains some <td> which contains JQuery (the first one is a datepicker and the last one removes the current <tr>). And when I add this <tr> the JQuery and it’s CSS doesn’t work :\

Here’s a Screenshot (the last <tr> is the <tr> which is added
dynamically) :

Here’s the jquery code of adding dynamically :

<script>
          $('.AddResults').click(function(){

            // All the cols
            var jourVar = $('<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>') ;
            var creneauVar = $('<td class="cr_td"><select><option value="h1">10h30</option><option value="h2">11h30</option></select><select class="cr_td_s2"><option value="h3">10h30</option><option value="h4">11h30</option></select></td>') ;
            var repassageVar = $('<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>') ;
            var menageVar = $('<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>') ;
            var totalVar = $('<td class="tt_td"><strong>4h.</strong></td>') ;
            var pttcVar = $('<td class="pttc_td"><strong>88 &#8364;</strong></td>') ;
            var corVar = $('<td class="cor_td"><a href="#"><img src="img/ico/corbeille.png" alt="" width="13" height="13" /></a></td>') ;      

            //Create 2 new rows
            var newTitreRow = $('<tr><td class="bar_td" colspan=7><strong>PRESTATION ' + rowNumber + '</strong></td></tr>') ;
            var newContentRow = $('<tr class="ligne_suppr">').append(jourVar).append(creneauVar).append(repassageVar).append(menageVar).append(totalVar).append(pttcVar).append(corVar).append('<\/tr>') ;

            //Append the new row to the body of the #table_prest table
            $('#table_prest tbody').append(newTitreRow);
            $('#table_prest tbody').append(newContentRow);

            $('<style type="text/css">@import url("' + myStylesLocation + '")</style>').appendTo("#table_prest tbody");

            //Iterate row number
            rowNumber++;
          });
        </script>

And here’s the datepicker code :

<script>
          $(function() {
            $( ".datepicker" ).datepicker({
              showOn: "button",
              buttonImage: "img/ico/jour_presta.png",
              buttonImageOnly: true
            });
          });
        </script>

And Here’s the deleting code :

<script>
          $('.ligne_suppr a').click(function(e) {
            e.preventDefault();
            var parent = $(this).parent().parent();  // parent <tr> of the anchor tag
            var previous = parent.prev();        // <tr> before the parent <tr>

            parent.remove();
            previous.remove();

            rowNumber -- ;
          });
        </script>

Do you have any Idea about this problem ?
Thank you 🙂

Answer 1

You need to undestand that datepicker is not just CSS. It is a jQuery UI plugin that adds both functionality and new DOM elements..

So the problem in your case is not with CSS not getting applied, but with the jQuery functionality not being applied to the dynamically created elements.

You need to re-run the datepicker code for the new elements..

So

Datepicker code

function applyDatepicker(context){
   context = context || document;
   $( ".datepicker", context ).datepicker({
        showOn: "button",
        buttonImage: "img/ico/jour_presta.png",
        buttonImageOnly: true
   });
}
$(function() {
    applyDatepicker();
});

Deleting code

$('#table_prest').on('click','.ligne_suppr a',function(e) {
    e.preventDefault();
    var parent = $(this).parent().parent();  // parent <tr> of the anchor tag
    var previous = parent.prev();        // <tr> before the parent <tr>

    parent.remove();
    previous.remove();

    rowNumber-- ;
});

jQuery for adding dynamically code

    $('.AddResults').click(function(){

        // All the cols
        var jourVar = $('<td class="jr_td"><p><input type="text" class="datepicker" /></p><p class="ou">ou</p><p><input type="text" class="datepicker" /></p></td>') ;
        var creneauVar = $('<td class="cr_td"><select><option value="h1">10h30</option><option value="h2">11h30</option></select><select class="cr_td_s2"><option value="h3">10h30</option><option value="h4">11h30</option></select></td>') ;
        var repassageVar = $('<td class="rp_td"><select><option value="h5" SELECTED>2h00</option><option value="h6">3h00</option></select></td>') ;
        var menageVar = $('<td class="mn_td"><select><option value="h7" SELECTED>2h00</option><option value="h8">3h00</option></select></td>') ;
        var totalVar = $('<td class="tt_td"><strong>4h.</strong></td>') ;
        var pttcVar = $('<td class="pttc_td"><strong>88 &#8364;</strong></td>') ;
        var corVar = $('<td class="cor_td"><a href="#"><img src="img/ico/corbeille.png" alt="" width="13" height="13" /></a></td>') ;      

        //Create 2 new rows
        var newTitreRow = $('<tr><td class="bar_td" colspan=7><strong>PRESTATION ' + rowNumber + '</strong></td></tr>') ;
        var newContentRow = $('<tr class="ligne_suppr">').append(jourVar).append(creneauVar).append(repassageVar).append(menageVar).append(totalVar).append(pttcVar).append(corVar).append('<\/tr>') ;

        //Append the new row to the body of the #table_prest table
        $('#table_prest tbody').append(newTitreRow);
        $('#table_prest tbody').append(newContentRow);

        applyDatepicker(newContentRow); // ADDED THIS LINE

        // removed line that re-added stylesheet.. not needed

        //Iterate row number
        rowNumber++;
      });