Question

我目前正在处理一个代码，该代码会在表单中添加其他表单元素，并会添加一个日期选择器。
我在现有代码中添加了一个“事件监听器”（感谢Chandler Zwolle的脚本https://stackoverflow.com/a/24767578/1025961），但是在使用表单元素处理日期选择器时遇到了一些困难。 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）之外，我还使用了'noConflict'命令使用了2个不同版本的JQuery.Jquery 1.10 .2用于动态添加的表单元素代码，而Jquery 2.1.3用于Zebra Datepicker。我网站上的版本行为与此小提琴上的版本相同，但是，我不知道如何添加第二个版本在JSFiddle中。）

感谢您的帮助。

Fiddle here

我在下面提供了我的代码。

一个。 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。

Dynamic Form Zebra Datepicker的事件监听器

1 个答案: