jQuery .click .appendTo 不加载其他 javascript

jQuery .click .appendTo not loading other javascript

本文关键字：其他 javascript 加载 click appendTo jQuery      更新时间：2023-09-26

>很难解释正在发生的事情，所以我会尽我所能。我有一个简单的jQuery脚本，当您选择"添加"按钮时，它会添加另一行输入框，因此如果用户想继续添加日期，他们可以或只是接受并继续。这部分工作正常，如下文在我的小提琴上看到的。 但是，当用户单击"添加"时，它将添加一个选择下拉列表和一个输入框，这些输入框也有来自pickadate的js.js以选择它们的日期。每当您选择"添加"选项以添加更多行时，它似乎没有加载任何 js，因为输入框完全空白，既没有保存类本身，也没有保存它应该保存的 js。此外，它没有在我的服务器端正确保存，就像它在两端都忽略了它一样。这是它在Firebug https://i.stack.imgur.com/ncxwG.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 正确读取？

当你调用 .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，这是无效的。不过，文本输入看起来不错。

相关文章：