2

<tr>JQueryを動的に追加するリンクがありますが、JQueryを含むリンクが<tr>含まれて<td>います（最初のリンクは日付ピッカーで、最後のリンクは現在のものを削除し<tr>ます）。そして、これをJQueryに追加する<tr>と、CSSが機能しなくなります：\

これがスクリーンショットです（最後<tr>は<tr>動的に追加されるものです）： ここに画像の説明を入力してください

動的に追加するjqueryコードは次のとおりです。

<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>

そして、これが日付ピッカーコードです：

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

そして、これが削除コードです：

<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>

この問題について何か考えはありますか？ありがとうございました ：-）

4

3 に答える 3

2

datepickerがCSSだけではないことを理解する必要があります。これは、機能と新しいDOM要素の両方を追加するjQueryUIプラグインです。

したがって、あなたの場合の問題は、CSSが適用されないことではなく、動的に作成された要素にjQuery機能が適用されないことです。

新しい要素の日付ピッカーコードを再実行する必要があります。

それで

日付ピッカーコード

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

コードを削除する

$('#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

    $('.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++;
      });
于 2012-04-09T17:10:59.520 に答える
1

.on()イベントを動的に追加された要素にバインドするために使用します。

于 2012-04-09T17:00:55.760 に答える
1

jqueryでコピーするには、次を使用します。

$('#div-you-can-copy-it').clone().insertAfter('#last-div');
于 2012-04-09T17:03:52.780 に答える