JCrop与下载的动态图像集成

Question

我正在尝试将JCrop集成到一个bootstrap模式中。尽管有这些细节，但似乎问题在于“动态”下载图像的事实。我的意思是：

1）表格由AJAX提交：

$('#postFileForm').ajaxForm({ success: afterPost });

2）正确调用'afterPost'功能。此函数具有来自服务器的返回文本作为参数：

function afterPost(responseText, statusText, xhr, $form) {
    $(".downloadedContent").html(responseText);
    $("#cropbox").Jcrop();
    ...
}

3）此文本从服务器返回：

<img src='xxx' alt='yyy' id='cropbox' /> 

我认为，当我通过html jQuery方法插入时，图像被添加到DOM中，我可以使用它。如果我在插入图像之后立即使用Chrome进行调试，通常可以通过jQuery检索它：

$("#cropbox").attr('src') //returns the source, f.e

但是裁剪不起作用。似乎发生了一些事情，因为它的样式属性如下：

style='display:none; visibility:hidden; width:...'

我认为它可能与css有关（根据我在Bootstrap中使用它的事实），但如果我删除动态下载图像的部分，我只是把它放在他的位置，一切正常。

任何帮助将不胜感激！谢谢！

Answer 1

请原谅。

我想和你们所有人一起为浪费时间而道歉:)。 JCrop将他的控件与jQuery选择器返回的第一个可用元素绑定在一起。

在这种情况下发生了什么事情，我在两个地方有同一个班级，我没有把它指向选择器。

$（“.downloadContent”）。html（responseText）必须类似$（“＃someDiv .downloadedContent）。

JCrop附属于一个隐藏的div，这就是故事。

感谢您的帮助。