Как уничтожить () определенный элемент и повторно инициализировать клон с помощью jQuery
У меня есть следующий вопрос:
Я использую плагин для обрезки тонких изображений для моего приложения, но у меня есть некоторые проблемы при клонировании HTML и повторной инициализации плагина.
Я уничтожаю объект, чтобы заставить плагин работать после клонирования новых полей. Проблема в том, что выбранное изображение удаляется при клонировании. Есть ли лучший подход к этому?
HTML-код:
<div class="row">
<div class="col-md-5">
<div class="clone">
<div class="row fieldset-content">
<div class="col-md-12">
<br>
<div class="form-group">
<input class="slim" type="file" name="slim[]" />
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<button class="add_field_button btn btn-warning">+ Add more fields</button>
<button type="submit" class="btn btn-success" name="submit-normal">Save changes</button>
</div>
</div>
Код JQuery:
<script>
$(document).ready(function() {
var options = {
ratio: '4:3',
label: 'Drop me here.',
instantEdit:true,
jpegCompression:true,
size:{
width: 640,
height: 480,
}
}
var cropper = $('.slim').slim(options);
$(document).on('click', '.add_field_button', function (e) {
e.preventDefault();
//destroy in order to get it working after clone
cropper.slim('destroy');
$('.fieldset-content').first().clone().appendTo('.clone');
$('.fieldset-content').first().find('.name').val('');
var rmvBtn = $('.fieldset-content').last().find('.remove-button');
//new instance
$('.slim').slim(options);
});
});
</script>