Issue with custom media uploader in WordPress - php

Question

I'm trying to create a metabox in WordPress that allows the user to select a PDF file to attach to the post he/she is creating. So far, the metabox shows well, and the media uploader works as expected to certain extent.
The problem is that when the user clicks in the browse button, the default media uploader will show first. If I close that one and click the button again, then the custom uploader will show up and work as expected. Here is the JS code I'm using...
jQuery(document).ready(function($){
// Instantiates the variable that holds the media library frame.
var pdf_file_frame;
// Runs when the image button is clicked.
$('#pdf-lesson-url-button').click(function(e){
// Prevents the default action from occurring.
e.preventDefault();
// If the frame already exists, re-open it.
if ( pdf_file_frame ) {
pdf_file_frame.open();
return;
}
// Sets up the media library frame
pdf_file_frame = wp.media.frames.file_frame = wp.media({
title: pdf_meta.title,
button: { text: pdf_meta.button },
library: { type: 'application/pdf' },
multiple: false
});
// Runs when an image is selected.
pdf_file_frame.on('select', function(){
// Grabs the attachment selection and creates a JSON representation of the model.
var media_attachment = pdf_file_frame.state().get('selection').first().toJSON();
// Sends the attachment URL to our custom image input field.
$('#pdf-lesson-url').val(media_attachment.url);
});
// Opens the media library frame.
wp.media.editor.open();
});
});
I have googled the issue but no satidfactory results came out. I might be using the wrong search phrase, but the truth is that I have no idea of what is happening here, especially when once you get the custom dialog to show it works OK.
Any help is highly appreciated.
Thanks to all who read this post.

Answer 1

Try adding .unbind('click') before .click(function()):
$('#pdf-lesson-url-button').unbind('click').click(function(e){
That may work, unbinding the default click function before running your custom one.

Answer 2

I finally solved it and as almost always, it was not that difficult. I copied the code from an example and while they are using a custom media uploader, in the last line of my code the default one is open instead. Changed the line from...
wp.media.editor.open();
to...
pdf_file_frame.open();
and that did it.
Thanks go to #Calvin for making me rethink.