Dynamic Form Zebra Datepicker的事件監聽器

Question

我目前正在使用一個代碼，它將向我的表單添加額外的表單元素，並將添加一個datepicker。
我已經將「事件偵聽器」（感謝Chandler Zwolle的腳本https://stackoverflow.com/a/24767578/1025961）添加到我現有的代碼中，但在讓datepicker使用表單元素時遇到了一些困難。 console.log調用似乎在「事件偵聽器」代碼中工作，但datepicker不是。

（注：除2個特別Zebra_Datepicker文件（https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.js）和（https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/css/default.css），我也一直在使用2個不同版本的jQuery，與「noConflict」命令的Jquery 1.10.2爲動態添加的形式。元素代碼和Zebra Datepicker的Jquery 2.1.3。我網站上的版本與這個小提琴上的版本的行爲方式相同，但我不確定如何在JSFiddle中添加第二個版本。）

感謝您的幫助。

Fiddle here。

我已經在下面列出了我的代碼。

A. HTML表單

<table> 
    <tr> 
     <td><button type="button" id="add-btn">Add Class Year</button></td> 
     <td></td> 
    </tr> 
    <tr class="class_yr"> 
     <td class="FormLabel" width="100px"><strong>Class Year*</strong></td> 
     <td width="100px"><input type="text" id="ClassYear_1" name="ClassYear_1" class="ClassYear" value="2004" tabindex="4" /></td> 
    </tr> 
</table> 

B. JS代碼

//var numeric = $(this).attr('id').match(/(\d+)/)[1] 
$(".ClassYear").each(function() { 
    num = parseInt(this.id.split("_")[1], 10); 
    id_string_prefix = "#ClassYear"; 
    id_string_combined = id_string_prefix.concat(num); 

    $(id_string_combined).off(); 
    console.log(id_string_combined); 

    // Re-add event handler for all matching elements 
    $(id_string_combined).on("click", function() { 
     // Handle event. 
     $(id_string_combined).Zebra_DatePicker({ 
      view: 'years', 
      readonly_element: true 
     }); 
    }); 


}); 

} 

$(document).ready(function() { 

    // Call our function to setup initial listening 
    RefreshSomeEventListener(); 


    function clone2() { 
     var $cloned = $('table tr.class_yr:last').clone(); 
     var $oldIndex_name = $cloned.find('input').attr('name').match(/\d+/); // 
     var $oldIndex_id = $cloned.find('input').attr('id').match(/\d+/); // 
     var $newValue = $cloned.find('input').val(''); 
     // 
     var newIndex_name = parseInt($oldIndex_name, 10) + 1; 
     var newIndex_id = parseInt($oldIndex_id, 10) + 1; 
     //console.log(newIndex_name); 
     $cloned.find('input').each(function() { 
      var newName = $(this).attr('name').replace($oldIndex_name, newIndex_name); 
      $(this).attr('name', newName); 
     }); 
     $cloned.find('input').each(function() { 
      var newId = $(this).attr('id').replace($oldIndex_id, newIndex_id); 
      $(this).attr('id', newId); 
     }); 
     $cloned.insertAfter('table tr.class_yr:last'); 
     //console.log('hello'); 
    } 
    $('#add-btn').click(function() { 
     clone2(); 
     //console.log('hello'); 


     // Refresh our listener, so the new element is taken into account 
     RefreshSomeEventListener(); 

    }); 
}); 

Answer 1

請注意Github上不是一個CDN。在你的小提琴中，你添加外部文件的方式是錯誤的。您需要包含Github文件的原始URL。因此將https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/css/default.css更改爲https://raw.githubusercontent.com/stefangabos/Zebra_Datepicker/master/public/css/default.css和https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.js至https://raw.githubusercontent.com/stefangabos/Zebra_Datepicker/master/public/javascript/zebra_datepicker.js。