动态表单 Zebra Datepicker 的事件侦听器

Posted 2023-05-09

【中文标题】动态表单 Zebra Datepicker 的事件侦听器

【英文标题】：Event Listener for Dynamic Form Zebra Datepicker

【发布时间】：2016-12-03 04:12:07

【问题描述】：

我目前正在使用一个代码，它将向我的表单添加额外的表单元素，并将添加一个日期选择器。 我在现有代码中添加了一个“事件侦听器”（感谢 Chandler Zwolle 的脚本https://***.com/a/24767578/1025961），但在让日期选择器与表单元素一起工作时遇到了一些困难。 console.log 调用似乎在“事件侦听器”代码中工作，但日期选择器却没有。

(注意：除了两个特殊的 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" ><strong>Class Year*</strong></td>
      <td ><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();

    );
);

【参考方案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。

【讨论】：

感谢您的帮助。当我粘贴您提供的 URL 时，我确实收到了警告，但忽略了它。不要过多地偏离轨道，但这种类型的链接会导致 JSFiddle 中的示例脚本不触发吗？

JSFiddle 已更新以反映上面建议的 URL 更改。