I'm a reluctant javascripter but I do find jquery speeds things - or slows them down. This is all happening at the back of WordPress. I have a .on event and from the event I pick up the Id of the object that got clicked, get a substr to get the id of the target, do some stuff and then put the result in the target input field. Should be a sinch, right? Unfortunately what happens is the first id works just fine but when the second one runs it reverts back to the original id. Code below. Would love to know how I'm stuffing this up. $('.btch_image_button').on('click', btchPopMediaLibrary); function btchPopMediaLibrary(event) { event.preventDefault(); var clickedId = '' + event.target.id; console.log(clickedId); var destination = '#' + clickedId.substring(9); console.log(destination); if (file_frame) { file_frame.open(); return; } file_frame = wp.media.frames.file_frame = wp.media({ title: $(this).data('uploader_title'), button: { text: $(this).data('uploader_button_text'), }, multiple: false //or true, doesn't make any difference }); file_frame.on('select', function () { attachment = file_frame.state().get('selection').first().toJSON(); console.log('double check the destination:' + destination); $(destination).val(attachment.sizes.thumbnail.url); }); file_frame.open(); } Code (markup):
Finally took the cheats way our and made destination a global variable using window.destination. Not how the original code was so the underlying problem hasn't been resolved but the code is working...