複製された要素では、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>