Javascript 向动态创建的图像添加裁剪器功能

我用url和“预览”按钮输入。 当我单击“预览”时，它会在“提交”按钮之前插入此url中的图像

  $('#preview').click(function() {
    var image_url = $('#event_remote_flyer_url').val();
    var image_tag = $('<img class="preview">');
    image_tag.attr('src',image_url)
    $('input[name="commit"]').before(image_tag);
  });

---

它不起作用。据我所知，javascript并没有等待这个裁剪器函数，而是在尚未插入

img.preview

时运行它。如何修复此问题？

您需要在创建

img时附加它。预览
元素，您的理解非常准确

$('#preview').click(function() {
    var image_url = $('#event_remote_flyer_url').val();
    var image_tag = $('<img class="preview">');
    image_tag.attr('src', image_url)
        //Atach Cropper
    image_tag.cropper({
        aspectRatio: 16 / 9,
        crop: function(e) {}
    });
    //Append
    $('input[name="commit"]').before(image_tag);
});

$（“#预览”）。单击（函数（）{
var image_url=$（'#event_remote_flyer_url'）.val（）；
var image_tag=$（“在创建
img.preview
元素时需要附加它，您的理解非常准确

$('#preview').click(function() {
    var image_url = $('#event_remote_flyer_url').val();
    var image_tag = $('<img class="preview">');
    image_tag.attr('src', image_url)
        //Atach Cropper
    image_tag.cropper({
        aspectRatio: 16 / 9,
        crop: function(e) {}
    });
    //Append
    $('input[name="commit"]').before(image_tag);
});

$（“#预览”）。单击（函数（）{
var image_url=$（'#event_remote_flyer_url'）.val（）；
变量图像\标记=$（“现在我看到了裁剪器网格，但是图像没有上传。并且得到这个错误：
image from origin”https://fbcdn-sphotos-b-a.akamaihd.net'已被跨源资源共享策略阻止加载：请求的资源上不存在'Access Control Allow Origin'标头。Origin'http://localhost:3000因此，acc不允许使用ess.响应的HTTP状态代码为403。
现在我看到了裁剪器网格，但图像未上载。并获取以下错误：
来自源站的图像'https://fbcdn-sphotos-b-a.akamaihd.net'已被跨源资源共享策略阻止加载：请求的资源上不存在'Access Control Allow Origin'标头。Origin'htt因此不允许访问p://localhost:3000。响应的HTTP状态代码为403。