Javascript 重新加载JQuery ans CSS

我有一个链接，可以使用JQuery动态添加一个

，但是我的

包含一些

，其中包含JQuery（第一个是日期选择器，最后一个删除当前的

）。当我添加这个

时，JQuery及其CSS不起作用：\

这是一个屏幕截图（最后一个

是添加的

） 动态）：

以下是动态添加的jquery代码：

$（'.AddResults'）。单击（函数（）{
//所有的科尔
var jourVar=$（'
ou
'）；
变量creneauVar=$（'10h3011h3010h3011h30'）；
var repassageVar=$（'2h003h00'）；
var menageVar=$（'2h003h00'）；
var totalVar=$（“4h.”）；
var pttcVar=$（'88€；）；
var corVar=$（''）；
//创建2个新行
var newTitreRow=$（“PRESTATION”+行数+”）；
var newContentRow=$（''）.append（jourVar）.append（creneauVar）.append（repassageVar）.append（menageVar.append（totalVar.append）（pttcVar.append（corVar.append）（''）；
//将新行附加到#table_prest table的主体中
$（'#table_prest tbody'）。追加（newitreRow）；
$（'#table_prest tbody'）。追加（newContentRow）；
$（“@import url”（“+myStylesLocation+”）。附录（“#table#prest tbody”）；
//迭代行数
行数++；
});

这是日期选择器代码：

$（函数（）{
$（“.datepicker”）.datepicker({
展示：“按钮”，
按钮图像：“img/ico/jour_presta.png”，
buttonImageOnly:true
});
});

下面是删除代码：

$（'.ligne_suppr a'）。单击（函数（e）{
e、 预防默认值（）；
var parent=$（this.parent（）.parent（）；//锚定标记的父项
var previous=parent.prev（）；//在父级之前
parent.remove（）；
上一个。删除（）；
行数--；
});

你知道这个问题吗？

---

谢谢：-）

用于将事件绑定到动态添加的元素。

用于将事件绑定到动态添加的元素。

要在jquery中复制，请使用：

$('#div-you-can-copy-it').clone().insertAfter('#last-div');

---

对于jquery中的复制，请使用：

$('#div-you-can-copy-it').clone().insertAfter('#last-div');

---

你需要明白日期选择器不仅仅是CSS。它是一个jQuery UI插件，添加了功能和新的DOM元素

因此，您案例中的问题不是没有应用CSS，而是没有将jQuery功能应用于动态创建的元素

您需要为新元素重新运行datepicker代码

所以

日期选择器代码

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-- ;
});

$（'table#prest'）。在（'click'，'ligne#u suppr a'，函数（e）{
e、 预防默认值（）；
var parent=$（this.parent（）.parent（）；//锚定标记的父项
var previous=parent.prev（）；//在父级之前
parent.remove（）；
上一个。删除（）；
行数--；
});

用于动态添加代码的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++;
      });

$（'.AddResults'）。单击（函数（）{
//所有的科尔
var jourVar=$（'
ou
'）；
变量creneauVar=$（'10h3011h3010h3011h30'）；
var repassageVar=$（'2h003h00'）；
var menageVar=$（'2h003h00'）；
var totalVar=$（“4h.”）；
var pttcVar=$（'88€；）；
var corVar=$（''）；
//创建2个新行
var newTitreRow=$（“PRESTATION”+行数+”）；
var newContentRow=$（''）.append（jourVar）.append（creneauVar）.append（repassageVar）.append（menageVar.append（totalVar.append）（pttcVar.append（corVar.append）（''）；
//将新行附加到#table_prest table的主体中
$（'#table_prest tbody'）。追加（newitreRow）；
$（'#table_prest tbody'）。追加（newContentRow）；
applyDatepicker（newContentRow）；//添加了此行
//删除了重新添加样式表的行..不需要
//迭代行数
行数++；
});

您需要理解日期选择器不仅仅是CSS。它是一个jQuery UI插件，添加了功能和新的DOM元素

因此，您案例中的问题不是没有应用CSS，而是没有将jQuery功能应用于动态创建的元素

您需要为新元素重新运行datepicker代码

所以

日期选择器代码

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-- ;
});

$（'table#prest'）。在（'click'，'ligne#u suppr a'，函数（e）{
e、 预防默认值（）；
var parent=$（this.parent（）.parent（）；//锚定标记的父项
var previous=parent.prev（）；//在父级之前
parent.remove（）；
上一个。删除（）；
行数--；
});

用于动态添加代码的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++;
      });

$（'.AddResults'）。单击（函数（）{
//所有的科尔
var jourVar=$（'
ou
'）；
变量creneauVar=$（'10h3011h3010h3011h30'）；
var repassageVar=$（'2h003h00'）；
var menageVar=$（'2h003h00'）；
var totalVar=$（“4h.”）；
var pttcVar=$（'88€；）；
var corVar=$（''）；
//创建2个新行
var newTitreRow=$（“PRESTATION”+行数+”）；
var newContentRow=$（''）.append（jourVar）.append（creneauVar）.append（repassageVar）.append（menageVar.append（totalVar.append）（pttcVar.append（corVar.append）（''）；
//将新行附加到#table_prest table的主体中
$（'#table_prest tbody'）。追加（newitreRow）；
$（'#table_prest tbody'）。追加（newContentRow）；
applyDatepicker（东北）