克隆後的jQuery UI日期選擇器分配

我克隆了一個HTML表格行並將其附加到表格末尾。其中一個字段是開始日期。我想將jQuery UI日期選擇器添加到克隆的行，但我無法使其工作。在.clone之後，在它附加到表的末尾之前，輸入和選擇元素id和name屬性都加1。在模板行中，我將datepicker添加到idStartDate，並且在克隆/追加新ID時會是idStartDate_（行號）。 $（element）.datepicker（）不應該工作嗎？當我在克隆行的chrome中執行一個檢查元素時，它已經分配了hadDatepicker類，但我仍然無法讓選擇器激活。克隆後的jQuery UI日期選擇器分配

$("#addRow").click(function() { 

     count++;   

     $("#rowCount").val(count); 

     var $clone = $("#ids tbody tr:first").clone(); 

     $clone.attr({ 
      id: "emlRow_" + count, 
      name: "emlRow_" + count, 
      style: "" 
     }); 
     $clone.find("input,select").each(function(){ 
      $(this).attr({     
       id: $(this).attr("id")+"_" + count, 
       name: $(this).attr("name")+"_" + count 
      });   

     }); 
     $("#ids tbody").append($clone); 

     var element = "idStartDate_"+count;   
     $(element).datepicker(); 
    })

來源

2015-09-18 Steve Salowitz

字符串'element'是否有正確的CSS選擇器？比如'＃idStartDate_3'（用'＃'）來正確選擇元素？另一種選擇可能是點擊處理程序未正確綁定到DOM上的新元素。您也可以在Chrome的開發工具面板中檢查點擊附件。 –

模板和克隆行的樣式相同。如何檢查Chrome中的單擊附件？ –

當您打開Inspector時，請轉至頂部的'Sources'選項卡。然後，在右側，您會看到「Event Listener Breakpoints」。展開，展開'Mouse'，並選中'click'旁邊的複選框。然後，點擊一下。如果附加了點擊處理程序，JavaScript將暫停，您將看到在「Sources」選項卡中突出顯示的相關處理代碼。 –

'hasDatepicker'類因爲克隆而被添加到目標元素，而不是jQuery。一旦我刪除了該類，然後將.datepicker（）添加到它正常工作的元素中。

$("#addRow").click(function() { 

     count++;   

     $("#rowCount").val(count); 

     var $clone = $("#ids tbody tr:first").clone(); 

     $clone.attr({ 
      id: "emlRow_" + count, 
      name: "emlRow_" + count, 
      style: "" 
     }); 
     $clone.find("input,select").each(function(){ 
      $(this).attr({     
       id: $(this).attr("id")+"_" + count, 
       name: $(this).attr("name")+"_" + count     
      });   

      if($(this).attr("name")=="idStartDate_"+count){ 
       $(this).removeClass('hasDatepicker') 
       $(this).datepicker();        
      }     
     }); 

     $("#ids tbody").append($clone); 
     $(".datePick").datepicker();    
})

來源

2015-09-18 20:28:47

我想我爲你找到了一些答案，或者至少在某處可以幫到你。這個問題可能與jQuery如何附加到像這樣動態創建的元素有關。下面是其中突出的問題，線程數，你會如何解決這個問題：

putting datepicker() on dynamically created elements - JQuery/JQueryUI

jQuery Datepicker does not work in dynamic element

從這些

除此之外，我怕我在任何更多的想法的損失。

來源

2015-09-18 19:04:44

您在正確的路徑！ http://stackoverflow.com/問題/ 5788999/jquery-datepicker-on-cloned-elements 這幫了我的忙。'hasDateicker'類被克隆而不是jQuery所添加，所以它永遠不會被激活，一旦我刪除它，然後添加.datepicker到元素我很好去 –

的選擇：

var element = "idStartDate_"+count;

不是由標識有效選擇嘗試將其更改爲：

var element = "#idStartDate_"+count;

的hasDatepicker是在元素上，因爲它的克隆。

來源

2015-09-18 19:09:25

這不起作用 –

請提供一個小提琴來測試問題 –

克隆後的jQuery UI日期選擇器分配

回答

相關問題