.live event doesnt work till second click

Posted by ChampionChris on Stack Overflow See other posts from Stack Overflow or by ChampionChris
Published on 2010-12-21T20:42:52Z Indexed on 2010/12/21 21:54 UTC
Read the original article Hit count: 247

Filed under:

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.

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 > 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
}

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().

// 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;
    });

EDIT @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 Microsoft JScript runtime error: Object doesn't support this property or method

this is the way I have the 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;
    });

© Stack Overflow or respective owner

Related posts about jQuery