javascript - pickadate() 函数不适用于克隆元素

Question

在克隆的元素中，我无法使用 pickadate() 功能。如何解决这个问题？我尝试删除该类，然后也使用它，但它不起作用。

以下是我的 jquery 代码:

$('.datepicker').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 15 // Creates a dropdown of 15 years to control year
});  

var counter8 = 1;
$(document).on('click', '#addPatent', function() {
  clonePatent();
});

$(document).on('click', '#removePatent', function() {
  var $patent = $(this).parents('.patent');
  $patent.remove();
});

function clonePatent() {
  counter8 += 1;
  $('#patentClone').append($('.patent:eq(0)').clone(true));
  $(".patent:last").show();
  $(".patent:last").find('[id]').each(function () {
    var id = $(this).attr('id');
    var id1 = $(this).attr('id') + counter8;
    $(this).attr('id', id).attr('name', id1);
  });
  // console.log(counter);
  $('#patentClone').find('#dummy8').attr('value', counter8);

}  

我一直在 Laravel 上编码，所以语法有点不同。以下是html部分代码:

<li>
                  <div class="collapsible-header">Patent</div>
                  <div class="collapsible-body container">
                    <div class="row ">
                              <div class="input-field col m6">
                                {!! Form::label('Patent Office') !!}
                                {!! Form::text('pOffice1', null, 
                                    array('id' => 'pOffice', 
                                          'class'=>'validate')) !!}
                                <!-- {{ Form::select('year', [
                                   '' => 'Patent Office',
                                   '1' => 'India',
                                   '2' => 'Afghanistan',
                                   '3' => 'USA'], 'Patent Office') 
                                }} -->
                              <!-- <select>
                                <option value="" disabled selected>Patent office</option>
                                <option value="1">India</option>
                                <option value="2">Afghanistan</option>
                                <option value="3">USA</option>
                                <option value="4">Australia</option>
                                       </select> -->

                        </div>
                               <!-- <div class="input-field col m6">
                               <input name="group1" type="radio" id="test1" />
                                <label for="test1">Patent issued</label>
                                   <input name="group1" type="radio" id="test2" />
                                <label for="test2">Patent pending</label>
                              </div> -->
                        <div class="input-field col m6">
                          {!! Form::label('Patent/Application No.') !!}
                          {!! Form::text('ptname1', null, 
                              array('id' => 'ptname', 
                                    'class'=>'validate')) !!}
                            <!-- <input id="ptname" type="text" class="validate">
                            <label for="ptname">Patent/Application no</label> -->
                        </div>
                              <div class="input-field col m6">
                                {!! Form::label('Patent Title') !!}
                                {!! Form::text('ptitle1', null, 
                                    array('id' => 'ptitle', 
                                          'class'=>'validate')) !!}
                            <!-- <input id="ptitle" type="text" class="validate">
                                  <label for="ptitle">Patent Title</label> -->
                        </div>
                              <div class="input-field col m6">
                                {!! Form::label('Issue/Filling Date') !!}
                                {!! Form::date('isdate1', null, 
                                    array('id' => 'isdate', 
                                          'class'=>'datepicker')) !!}
                            <!-- <input placeholder="Issue/Filling date" type="text" class="datepicker"> -->
                        </div>
                              <div class="input-field col m12">
                                {!! Form::label('Inventors') !!}
                                {!! Form::text('inventors1', null, 
                                    array('id' => 'inventors', 
                                          'class'=>'validate')) !!}
                            <!-- <input id="inventors" type="text" class="validate">
                                  <label for="inventors">Inventors</label> -->
                        </div>

                              <div class="input-field col m12">
                                {!! Form::label('Patent URL') !!}
                                {!! Form::text('pturl1', null, 
                                    array('id' => 'pturl', 
                                          'class'=>'validate')) !!}
                            <!-- <input id="pturl" type="text" class="validate">
                                  <label for="pturl">Patent Url</label> -->
                        </div>
                              <div class="input-field col m12">
                                {!! Form::label('Description') !!}
                                {!! Form::text('ptdesc1', null, 
                                    array('id' => 'ptdesc', 
                                          'class'=>'validate')) !!}
                            <!-- <textarea id="ptdesc" class="materialize-textarea"></textarea>
                    <label for="ptdesc">Description</label> -->
                              </div>
                              </div>
                              <div id="patentClone">
                                {!! Form::text('dummy8', 1, 
                                        array('id' => 'dummy8', 
                                              'class'=>'validate')) !!}
                                <div class="patent" style="display: none;">
                                  <div class="row ">
                              <div class="input-field col m6">
                                {!! Form::label('Patent Office') !!}
                                {!! Form::text('', null, 
                                    array('id' => 'pOffice', 
                                          'class'=>'validate')) !!}
                                <!-- {{ Form::select('year', [
                                   '' => 'Patent Office',
                                   '1' => 'India',
                                   '2' => 'Afghanistan',
                                   '3' => 'USA'], 'Patent Office') 
                                }} -->
                              <!-- <select>
                                <option value="" disabled selected>Patent office</option>
                                <option value="1">India</option>
                                <option value="2">Afghanistan</option>
                                <option value="3">USA</option>
                                <option value="4">Australia</option>
                                       </select> -->

                        </div>
                               <!-- <div class="input-field col m6">
                               <input name="group1" type="radio" id="test1" />
                                <label for="test1">Patent issued</label>
                                   <input name="group1" type="radio" id="test2" />
                                <label for="test2">Patent pending</label>
                              </div> -->
                        <div class="input-field col m6">
                          {!! Form::label('Patent/Application No.') !!}
                          {!! Form::text('', null, 
                              array('id' => 'ptname', 
                                    'class'=>'validate')) !!}
                            <!-- <input id="ptname" type="text" class="validate">
                            <label for="ptname">Patent/Application no</label> -->
                        </div>
                              <div class="input-field col m6">
                                {!! Form::label('Patent Title') !!}
                                {!! Form::text('', null, 
                                    array('id' => 'ptitle', 
                                          'class'=>'validate')) !!}
                            <!-- <input id="ptitle" type="text" class="validate">
                                  <label for="ptitle">Patent Title</label> -->
                        </div>
                              <div class="input-field col m6">
                                {!! Form::label('Issue/Filling Date') !!}
                                {!! Form::date('', null, 
                                    array('id' => 'isdate', 
                                          'class'=>'datepicker')) !!}
                            <!-- <input placeholder="Issue/Filling date" type="text" class="datepicker"> -->
                        </div>
                              <div class="input-field col m12">
                                {!! Form::label('Inventors') !!}
                                {!! Form::text('', null, 
                                    array('id' => 'inventors', 
                                          'class'=>'validate')) !!}
                            <!-- <input id="inventors" type="text" class="validate">
                                  <label for="inventors">Inventors</label> -->
                        </div>

                              <div class="input-field col m12">
                                {!! Form::label('Patent URL') !!}
                                {!! Form::text('', null, 
                                    array('id' => 'pturl', 
                                          'class'=>'validate')) !!}
                            <!-- <input id="pturl" type="text" class="validate">
                                  <label for="pturl">Patent Url</label> -->
                        </div>
                              <div class="input-field col m12">
                                {!! Form::label('Description') !!}
                                {!! Form::text('', null, 
                                    array('id' => 'ptdesc', 
                                          'class'=>'validate')) !!}
                            <!-- <textarea id="ptdesc" class="materialize-textarea"></textarea>
                    <label for="ptdesc">Description</label> -->
                              </div>
                              </div>
                               <a class="waves-effect btn" id="removePatent">Remove</a> 

                                </div>
                              </div> 
                               <a class="waves-effect btn" id="addPatent">Add</a> 
                    </div>
                </li>

Answer 1

您必须在 clonePatent() 函数末尾使用 .pickadate() 在新克隆元素中初始化 pickadate :

function clonePatent() {

    ...

    $('#patentClone .datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year
    });
}

希望这有帮助。