.live event doesnt work till second click
- by ChampionChris
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;
});
