jQuery -从动态URL将图像加载到div

Question

一旦将jQuery填充到输入框中，我将尝试使用URL将图像加载到div中。

到目前为止，当输入div被填充后，我成功地获得了一个显示的警报。

<script type="text/javascript">
jQuery( document ).ready(function() {
    jQuery( ".mediafield-url" ).change(function() {
        alert( "Handler for .change() called." );
    });
}); 
</script>

现在，我想替换此警报，而是从URL中提取div中的图像显示。

有人向我指出一个示例的方向，或者阅读jquery函数的方向，我需要看一下才能实现它？

更新

继Newt的最新消息后，我现在有了这个..

function custom_admin_js() {
    echo '<script type="text/javascript">
    jQuery(\'.mediafield-url\').change(function(){
    var a = $(this).val();
    var new_img = \'<img src=\'+a+\'>\';
    jQuery(\'.your-div\').html(new_img);
});
    </script>';
}
add_action('admin_footer', 'custom_admin_js');

这是在WordPress的管理部分触发的，虽然它在JSFiddle中工作得很好，但是当在WP管理部分运行时，它会给我错误.

Uncaught TypeError: undefined is not a function post-new.php?post_type=image:716
(anonymous function) post-new.php?post_type=image:716

n.event.dispatch load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
r.handle load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
n.event.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
e.event.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:8
(anonymous function) load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
n.extend.each load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:2
n.fn.n.each load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:2
n.fn.extend.trigger load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload,json2&ver=3.9.2:3
send_to_editor post-new.php?post_type=image:754
(anonymous function) media-upload.php?type=file&tab=library&post_id=93:4

知道我哪里出问题了吗？

Answer 1

这应能解决以下问题：

$('.mediafield-url').change(function(){
    var a = $(this).val();
    var new_img = '<img src='+a+'>';
    $('.your-div').html(new_img);
});

小提琴：http://jsfiddle.net/Newtt/v0ycp7a6/2/

Answer 2

如果您知道图像的url，那么只需在div中添加一个css属性“background”，例如：

$('yourDiv').css('background-image', 'url(http://yourUrl.de/image.jpg)').

您的浏览器应该能够加载图像并将其作为背景图像放置。