$(this).parent().find()无法正常工作 _jquery-selectors

我正在制作一个显示图像的Wordpress小部件, 并使用Wordpress媒体上传器上传/更改该图像。
这是我正在使用的管理表单标记：

< p class="media-control" data-title="Choose an image" data-update-text="Choose image"> < input class="image-url" name="image-url" type="hidden" value=""> < img class="image-preview" src=""> < br> < a class="button" href="http://www.srcmini.com/#"> Pick image< /a> < /p>

当我单击” .media-control a” 时, 将显示上载器, 我可以选择图像。但是, 当我选择图像” .image-preview” 和” .image-url” 时, 不会更新。
这是我的Javascript：http：//jsfiddle.net/etzolin/DjADM/
除以下几行外, 一切都按预期工作：

jQuery(this).parent().find('.image-url').val(attachment.url); jQuery(this).parent().find('.image-preview').attr('src', attachment.url);

当我这样写它们时, 将设置输入值并更新图像预览：

jQuery('.media-control .image-url').val(attachment.url); jQuery('.media-control .image-preview').attr('src', attachment.url);

但是, 由于我使用了多个这些小部件中的一个, 因此它会更新每个小部件中的输入值和图像预览。
如何仅在我正在编辑的小部件中设置输入值并更新图像预览？我究竟做错了什么？
#1在媒体框架的事件处理程序中, 这不是clicked元素

var media_frame; jQuery('.media-control a').live('click', function (event) {var self = this; event.preventDefault(); if (media_frame) { media_frame.open(); return; }media_frame = wp.media.frames.media_frame = wp.media({ title: jQuery(self).parent().data('title'), button: { text: jQuery(self).parent().data('update-text'), }, multiple: false }); media_frame.on('select', function () { attachment = media_frame.state().get('selection').first().toJSON(); jQuery(self).parent().find('.image-url').val(attachment.url); // set .image-url value jQuery(self).parent().find('.image-preview').attr('src', attachment.url); // update .image-preview //^^ this is not the element from the click handler but the media frame }); media_frame.open(); });

【$(this).parent().find()无法正常工作】并且你应该使用on(), 因为live()已弃用并从jQuery中删除