0

很难解释发生了什么，所以我会尽我所能。我有一个简单的 jQuery 脚本，当您选择“添加”按钮时，它会添加另一行输入框，因此如果用户想继续添加他们可以或只是接受并继续前进的日期。这部分工作正常，如下面的我的小提琴所示。但是，当用户点击“添加”时，它会添加一个选择下拉菜单和一个输入框，这些输入框也有来自 pickadate.js 的 js 来选择他们的日期。每当您选择“添加”选项来添加更多行时，它似乎没有加载任何 js，因为输入框完全是空白的，并且既不包含类本身也不包含它应该包含的 js。它也没有在我的服务器端正确保存，就像它在双方都忽略它一样。这是它的图像'http://i.imgur.com/25bjIBR.png

jsfiddle 脚本：

http://jsfiddle.net/q3jrU/

完整的js代码：

        <script>
$(document).ready(function(){   
    $('.datepicker').pickadate({
    monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     disable: [
        1
    ],
     min: new Date("today"),
     today: '',
     clear: ''
    });

    var i = $('input').size() + 1;

    $('#add').click(function() {
        $('<div><select name="office" id="office"><option value="test">Select Office </option></select> {{ Form::text('date[]', Input::old('date[]'), array('class' => 'datepicker', 'placeholder' => 'Select a date')) }}</div>').fadeIn('medium').appendTo('.inputs');
        i++;
    });

    $('#remove').click(function() {
    if(i > 1) {
        $('.datepicker:last').remove();
        i--;
    }
    });
});     
    </script>

仅供参考，脚本位于页面本身的底部。服务器端是 laravel 4。如何让我的 js 正确读取？

4

1 回答 1

1

当您调用 时.pickadate()，您是在告诉它将该插件添加到所有现有的匹配元素（在这种情况下，任何具有 class 的现有元素datepicker）。但是当您调用 时.pickadate()，那些动态添加的字段并不存在。

因此，在创建它们之后，您还需要调用.pickadate()它们。我会做这样的事情：

$(document).ready(function(){   
    var pickadateOptions = {
        monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        disable: [
            1
        ],
        min: new Date("today"),
        today: '',
        clear: ''
    };

    // get all existing elements with the 'datepicker' class and apply the plugin
    $('.datepicker').pickadate(pickadateOptions);

    var i = $('input').size() + 1;

    $('#add').click(function() {
        $('<div><select name="office" id="office"><option value="test">Select Office </option></select> {{ Form::text('date[]', Input::old('date[]'), array('class' => 'datepicker', 'placeholder' => 'Select a date')) }}</div>')
            .fadeIn('medium')
            .appendTo('.inputs')
            .find('input')
                .pickadate(pickadateOptions); // apply the plugin to the new element
        i++;
    });

    $('#remove').click(function() {
        if(i > 1) {
            $('.datepicker:last').remove();
            i--;
        }
    });
});

此外，每个新创建的<select>盒子都将具有相同的名称和 ID，这是无效的。不过，文本输入看起来不错。

于 2013-11-07T03:06:48.427 回答