Event bubbling jQuery .delegate() or .live() after click event

I've tried so many different possibilities to achieve what I feel like should be a simple code execution. I am loading DOM objects from the server via .load(). One of the loaded items is an input text box with a date in it. I want to load the jdpicker (a plugin datepicker) when I click on the input box. Due to the behavior of .live() and .delegate(), even when I use .die() or .undelegate() respectively, I can't get the popup datepicker to behave normally. It either pops up, allows me to click one object in the window and then immediately closes (I cannot navigate through the months, years without the window closing), or the window pops up and every subsequent click re-executes the code producing multiple instances of the datepicker.

I've tried different combinations of .live(), .delegate(), .one() with no luck. I've tested the datepicker in the main window and know that it works fine there. I could post code, but am not sure which of the ten different attempts I've made would be the best example. I can show my latest attempt.

Does anyone have a suitable example for this? Thanks!

Update

I've edited the code to read as follows:

$("#edit-entry").load("/edit/", { id:id }, function(){
                $('.jdpicker').one('click', function(){
                    $(this).jdPicker();
                });
});

This is hinging on becoming the complete answer. The datepicker is no longer calling multiple instances, which is good, but I still can't navigate it's controls (month, year selection). If I click the next month, it will load and close. The next time I click it, it re-opens on the next month. So, it does work, but is certainly not desirable. Any suggestions?

Solution

You just can't do that with "live" or "delegate". The fact of the matter is that you'll need to apply your plugin initialization explicitly after ".load()" succeeds.

edit — the change you've made is probably not going to work. Here's your code in English:

"Fetch content from the URL '/edit/' and deposit it into the element with id 'edit-entry'. When that content has been received, then bind a one-time event handler to the "click" function of all elements with class 'jdpicker'. In that event handler, set up the 'jdPicker' functionality for the element."

Instead, what you should be doing is just calling the jdPicker setup directly instead of setting it up so that the user has to click on the elements first.

$("#edit-entry").load("/edit/", { id:id }, function(){
    $('.jdpicker').each(function(){
        $(this).jdPicker();
    });
});