i’m setting a click event on a div that is dynamically created in a jqueryUI drop event (part of draggable), the click event will remove the div. That works fine. Inside of document.ready I do the same thing, based on data from local storage. I can create the dynamic divs, but the click event does not bind, or the binding is lost. I’ve tried using “click”, “live” and “on”. I’ve also removed the loop it sits in and just attached to the first item, none of it works when sitting directly in $(document).ready, but works fine when I set the click in the drop event.
this works: binding from droppable
$( "#planView" ).droppable({
drop: function( event, ui ) {
if(ui.draggable.find(".planButton").length == 1){
// make unique ID,add ID to last child,add click event last child,add plan to model with plan data and ID
var id = ui.draggable[0].id; // we use the id to grab the right cart html and cart data
var id = id.substring(0, id.length-6);
var newPlan;
var newID;
var planData;
$( this ).append(planCartObjects[id]);
newPlan = $( this ).find('>:last-child');
newID = "cartObject"+cartIDcounter++;
newPlan.attr("id",newID);
planData = $.extend(true,{},planDataObjects[id]); //makes a copy of the data object
planData.id = newID;
shoppingCart.addPlan(planData);
shoppingCart.logCart();
newPlan.click(function(){
//remove element
$(this).remove();
shoppingCart.removePlan(newID);
console.log("newID "+newID);
});
}
}
this does not work – called once on document.ready
$(document).ready(function() {
//check local storage
//if yes create plan and or feature cart objects
//populate model
var cartIDcounter = 0;
var localStorageKey = "vlocalstore234";
var shoppingCart;
shoppingCart = shoppingCartMaker({});
if(localStorage.getItem(localStorageKey)){
//grab cartModel, clear out local storage, calladdplan ans addfeature in a loop to create htmls objs and data obj
var cartModel = JSON.parse(localStorage.getItem(localStorageKey));
localStorage.removeItem(localStorageKey);
//update cart with saved features and plans
var i;
var l = cartModel.plans.length;
var newPlan;
var newID;
var planData;
var id;
for(i=0;i<l;i++){
console.log(cartModel.plans[i].name);
id = cartModel.plans[i].name
$( "#planView" ).append(planCartObjects[id]);
newPlan = $( this ).find('>:last-child');
newID = "cartObject"+cartIDcounter++;
newPlan.attr("id",newID);
planData = $.extend(true,{},planDataObjects[id]); //makes a copy of the data object
planData.id = newID;
shoppingCart.addPlan(planData);
shoppingCart.logCart();
newPlan.on("click",function(){
//remove element
$(this).remove();
shoppingCart.removePlan(newID);
console.log("newID "+newID);
});
}
complete code block
$(document).ready(function() {
//check local storage
//if yes create plan and or feature cart objects
//populate model
var cartIDcounter = 0;
var localStorageKey = "vlocalstore234";
var shoppingCart;
shoppingCart = shoppingCartMaker({});
if(localStorage.getItem(localStorageKey)){
//grab cartModel, clear out local storage, calladdplan ans addfeature in a loop to create htmls objs and data obj
var cartModel = JSON.parse(localStorage.getItem(localStorageKey));
localStorage.removeItem(localStorageKey);
//update cart with saved features and plans
var i;
var l = cartModel.plans.length;
var newPlan;
var newID;
var planData;
var id;
for(i=0;i<l;i++){
console.log(cartModel.plans[0].name);
id = cartModel.plans[0].name
$( "#planView" ).append(planCartObjects[id]);
newPlan = $( this ).find('>:last-child');
newID = "cartObject"+cartIDcounter++;
newPlan.attr("id",newID);
planData = $.extend(true,{},planDataObjects[id]); //makes a copy of the data object
planData.id = newID;
shoppingCart.addPlan(planData);
shoppingCart.logCart();
newPlan.live("click",function(){
//remove element
$(this).remove();
shoppingCart.removePlan(newID);
console.log("newID "+newID);
});
}
l = cartModel.features.length;
for(i=0;i<l;i++){
console.log(cartModel.features[i].name);
id = cartModel.features[i].name;
$("#featureView").append(featureCartObjects[id]);
newPlan = $( this ).find('>:last-child');
newID = "cartObject"+cartIDcounter++;
newPlan.attr("id",newID);
featureData = $.extend(true,{},featureDataObjects[id]);
featureData.id = newID;
shoppingCart.addFeature(featureData);
shoppingCart.logCart();
newPlan.click(function(){
//delete view and remove from model
$(this).remove();
shoppingCart.removeFeature(newID);
console.log("newID "+newID);
//remove from model
});
}
}
//Plans drag and drop
$( "#myPlans span" ).draggable({
start: function(event, ui) {},
stop: function(event, ui) {
$( "#chooser span" ).css({'top':'0px', 'left':'0px'});
}
});
$( "#planView" ).droppable({
drop: function( event, ui ) {
if(ui.draggable.find(".planButton").length == 1){
// make unique ID,add ID to last child,add click event last child,add plan to model with plan data and ID
var id = ui.draggable[0].id; // we use the id to grab the right cart html and cart data
var id = id.substring(0, id.length-6);
var newPlan;
var newID;
var planData;
$( this ).append(planCartObjects[id]);
newPlan = $( this ).find('>:last-child');
newID = "cartObject"+cartIDcounter++;
newPlan.attr("id",newID);
planData = $.extend(true,{},planDataObjects[id]); //makes a copy of the data object
planData.id = newID;
shoppingCart.addPlan(planData);
shoppingCart.logCart();
newPlan.click(function(){
//remove element
$(this).remove();
shoppingCart.removePlan(newID);
console.log("newID "+newID);
});
}
}
});
//features drag and drop
$("#addOnFeatures span").draggable({
start: function(event, ui){},
stop: function(event, ui){
$("#addOnFeatures span").css({'top':'0px', 'left':'0px'});
}
});
$("#featureView").droppable({
drop: function(event, ui){
if(ui.draggable.find(".featureButton").length == 1){
var id = ui.draggable[0].id;
var id = id.substring(0, id.length-6);
var newPlan;
var newID;
var featureData;
var mydata;
$( this ).append(featureCartObjects[id]);
newPlan = $( this ).find('>:last-child');
newID = "cartObject"+cartIDcounter++;
newPlan.attr("id",newID);
featureData = $.extend(true,{},featureDataObjects[id]);
featureData.id = newID;
shoppingCart.addFeature(featureData);
shoppingCart.logCart();
newPlan.click(function(){
//delete view and remove from model
$(this).remove();
shoppingCart.removeFeature(newID);
console.log("newID "+newID);
//remove from model
});
}
}
});
});
I think your problem lies with the $(this) before your selector. What does $(this) refer to in the .ready() scope?