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。