.live event doesnt work till second click
<p>I have 2 list on a page that are linked.  When I drag a li element from list 1 to list 2 the live events on list 1 don't work on the first click only second click.  Below is the code that adds the li (obj) to list 2.</p>

<pre><code>function AddToDropBox(obj) {
    $(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut();
    $(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast');
    $(obj).children(".play").css("margin-right", "8px");
    $(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" });
    if ($(".sidebar-drop-box ul").children(".admin-song").length &gt; 0) {
        $(".dropTitle").fadeOut("fast");
        $(".sidebar-drop-box ul.admin-song-list").css("min-height", "0");
    }
    if (typeof SetLinks == 'function') {
        SetLinks();
    }
//CBG Changes adds media ID to hidden field
    //checks id there is a value in field then adds comma
    if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value==""||document.getElementById("ctl00_cphBody_hfRemoveMedia").value==null)
    {
    document.getElementById("ctl00_cphBody_hfRemoveMedia").value=(obj).attr("mediaid");
    }
    else
    {
    var localMediaIDs=document.getElementById("ctl00_cphBody_hfRemoveMedia").value;
    document.getElementById("ctl00_cphBody_hfRemoveMedia").value=localMediaIDs+", "+(obj).attr("mediaid");
    }
//    alert("hfid: "+document.getElementById("ctl00_cphBody_hfRemoveMedia").value);
//END CBG Modifications
}
</code></pre>

<p>this is one of the live() events that dont fire until the second click after the drag.  This live() event is in a document.ready function().</p>

<pre><code>// Live for deleting.
    $(".btn-del").live("click", function(e) {
        DeleteItem(this);
        $(this).removeClass("btn-del").addClass("btn-add").parents("li").removeClass("alt").addClass("removed");
        var oldTxt = $(this).parents("li").find(".status").text();
        $(this).parents("li").find(".status").text("Removed").attr("oldstat", oldTxt);
        $("#timeHolder input[type=hidden]").val(($("#timeHolder input[type=hidden]").val() * 1) - ($(this).parents("li").find(".time").attr("length") * 1));
        CalculateAggregates();
        isDirty = false;
    });
</code></pre>

<p><strong>EDIT</strong>
@dreaton.. Im new to jquery and javascript so thanks for the last tip... Im not sure what you mean about cache the query's. ... the delegete feature is giving me this <em>Microsoft JScript runtime error: Object doesn't support this property or method</em></p>

<p>this is the way I have the code</p>

<pre><code>$('#ulPlaylist').delegate('.btn-del', 'click', function (e) {
        DeleteItem(this);
        $(this).removeClass("btn-del").addClass("btn-add").parents("li").removeClass("alt").addClass("removed");
        var oldTxt = $(this).parents("li").find(".status").text();
        $(this).parents("li").find(".status").text("Removed").attr("oldstat", oldTxt);
        $("#timeHolder input[type=hidden]").val(($("#timeHolder input[type=hidden]").val() * 1) - ($(this).parents("li").find(".time").attr("length") * 1));
        CalculateAggregates();
        isDirty = false;
    });
</code></pre>

<p>Update:</p>

<p>after the drag and drop all jquery and javascript functionality seems to be gone.  when I do a reverse drag and drop the the javascript function that handles that event doenst fire either. </p>

<pre><code>function AddToLeftList(obj) {
    $(obj).children(".handle").animate({ width: "50px" }).children("strong").fadeIn();
    $(obj).find("span:has(.btn-edit)").hide();
    $(obj).children("span:not(:has(.btn-edit))").fadeIn('fast');
    $(obj).children(".play").css("margin-right", "auto");
    $(obj).children("[smallonly]").remove();
    $(obj).css({ "opacity": "0.0", "width": "610px" }).animate({ opacity: "1.0" });
    CheckLeftList();
    if (typeof SetLinks == 'function') {
        SetLinks();
    }
</code></pre>

<p>above the javascript that doesnt excute.  I am not sure that helps but i realize that all the functionality from javascript and jquery dont execute on the first user action.  only after the second.</p>
