cropp ie привязка к добавленному элементу - PullRequest
Новая
       57

cropp ie привязка к добавленному элементу

0 голосов
/ 21 марта 2020

Привет, я пытаюсь добавить элемент, а затем использовать cropp ie на элементе, я не могу заставить его работать, когда я добавляю элемент. но если он у меня есть в html, он работает

Мой JS код, обратите внимание, что мой let div это html, что при сохранении и рендеринге в html он работает 

let div = '<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel"><?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4></div><div class="modal-body"><div id="upload-demo" class="center-block"></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button></div></div></div></div>';


let $uploadProfile, tempFilename, rawImg, imageId;
function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {

      //$("body").append(div);
      $("#cropImagePop").modal("show");
      rawImg = e.target.result;
    };
    reader.readAsDataURL(input.files[0]);
  } else {
    alert("Sorry - you're browser doesn't support the FileReader API");
  }
}

$uploadProfile = $("#upload-demo").croppie({
  viewport: {
    width: 150,
    height: 200
  },
  enforceBoundary: false,
  enableExif: true
});
$("#cropImagePop").on("shown.bs.modal", function() {
  // alert('Shown pop');
  $uploadProfile
    .croppie("bind", {
      url: rawImg
    })
    .then(function() {
      console.log("jQuery bind complete");
    });
});

$(".item-img").on("change", function() {
  //imageId = $(this).data("id");
  //tempFilename = $(this).val();
  //$("#cancelCropBtn").data("id", imageId);
  readFile(this);
});
...