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 
    }); 
} 

希望這有助於。