Подключаемый модуль croppie не работает с использованием содержимого ajax / innerHtml

Я использую подключаемый модуль croppie, но не работает, когда содержимое перезаписывается с помощью ajax / php (результат show with innerHtml). Что я должен делать? Пожалуйста, помогите мне!

Узнайте больше о croppie: https://foliotek.github.io/Croppie/

Содержание data.php: компиляция кода php и html

<?php
if(isset($_POST['id']) && $_POST['id'] == 1){
?>
<div id="upload-demo" style="width:350px"></div>
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<?php
}
?>

Мои коды:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>

<div id="div1"></div>

<button>Get External Content</button>
<script>
$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                    type: 'get',
                    url: 'php/data.php',
                    data: {
                            id: '1'
                    },
                    success: function(response) {
                            document.getElementById("div1").innerHTML = response;
                    }
            });
        });
});

$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$('#upload').on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>

javascript,jquery,ajax,

1

Ответов: 1

1

Ваша проблема будет решена с помощью следующего кода:

<script>
$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                    type: 'get',
                    url: 'php/data.php',
                    data: {
                            id: '1'
                    },
                    success: function(response) {
                            document.getElementById("div1").innerHTML = response;
                    }
            });
        });
});


var $uploadCrop;
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$(document).on('change', '#upload', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});
</script>
JavaScript, JQuery, AJAX,
Похожие вопросы
Яндекс.Метрика