Question

很难解释发生了什么，所以我会尽我所能。我有一个简单的jQuery脚本，当你选择“添加”按钮时，它会添加另一行输入框，所以如果用户想要继续添加日期，他们可以或只是接受并继续前进。这部分工作正常，如下面我的小提琴。但是，当用户点击“添加”时，它会添加一个选择下拉菜单和一个输入框，这些输入框也有来自pickadate.js的js来选择他们的日期。每当你选择“添加”选项来添加更多行时，似乎它没有加载任何js，因为输入框是完全空白的，并且没有持有类本身或它所设想的js。此外，它无法在我的服务器端正确保存，就像它忽略了它的双方。这是Firebug 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>

fyi脚本位于页面底部。服务器端是laravel 4.如何让我的js正确读取？

Answer 1

当你致电.pickadate()时，你告诉它将该插件添加到所有现有的匹配元素（在这种情况下，任何现有元素都带有类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，这是无效的。但是，文本输入看起来很好。

jQuery .click .appendTo没有加载其他的JavaScript

1 个答案: