jQuery的单击事件不会开火动态创建的div [英] jquery click event not firing on dynamically created div
本文介绍了jQuery的单击事件不会开火动态创建的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在被动态在jQueryUI的drop事件（可拖动的一部分）创建一个div设置一个点击事件，单击事件将删除该分区。这工作正常。里面的document.ready我做同样的事情的基础上，从本地存储的数据。我可以创建动态的div，但Click事件不会绑定，或者绑定都将丢失。我一直在使用点击试过了，活和关于。我也删除它坐落在，只是附着在第一项循环，直接在$（文件）。就绪坐位时没有它的工作原理，但是当我设置drop事件点击工作正常。
这个工程：从投掷的结合
$（#planView）.droppable（{
下降：函数（事件，UI）{
如果（ui.draggable.find（。planButton）。长度== 1）{
//做唯一的ID，ID添加到最后一个孩子，添加click事件最后一个孩子，增加计划，计划数据和ID建模
变种的id = ui.draggable [0] .ID; //我们使用id抢权车html和车数据
变种的id = id.substring（0，id.length-6）;
VAR newPlan的;
VAR NEWID;
VAR planData; $（本）.append（planCartObjects [ID]）;
newPlan的= $（本）.find（'＆GT;：最后一个孩子'）;
NEWID =cartObject+ cartIDcounter ++;
newPlan.attr（ID，NEWID）;
planData = $ .extend（真{} planDataObjects [ID]）; //使得数据对象的副本
planData.id = NEWID;
shoppingCart.addPlan（planData）;
shoppingCart.logCart（）;
newPlan.click（函数（）{
//移除元素
$（这）一个.remove（）;
shoppingCart.removePlan（NEWID）;
的console.log（NEWID+ newid的）;
}）;
}
}
这不工作 - 对的document.ready调用一次
$（文件）。就绪（函数（）{
//检查本地存储
//如果是创建计划，或功能车对象
//填充模式
变种cartIDcounter = 0;
VAR localStorageKey =vlocalstore234;
VAR购物车; 购物车= shoppingCartMaker（{}）; 如果（localStorage.getItem（localStorageKey））{
//抢cartModel，清除本地存储，calladdplan答addfeature在一个循环中创建HTMLS OBJ文件和数据OBJ
变种cartModel = JSON.parse（localStorage.getItem（localStorageKey））;
localStorage.removeItem（localStorageKey）;
//已保存的功能，并计划更新车
VAR我;
变种L = cartModel.plans.length;
VAR newPlan的;
VAR NEWID;
VAR planData;
VAR ID; 对于（i = 0; I＆LT;升;我++）{
的console.log（cartModel.plans [我]。名称）;
ID = cartModel.plans [我]。名称
$（#planView）.append（planCartObjects [ID]）;
newPlan的= $（本）.find（'＆GT;：最后一个孩子'）;
NEWID =cartObject+ cartIDcounter ++;
newPlan.attr（ID，NEWID）;
planData = $ .extend（真{} planDataObjects [ID]）; //使得数据对象的副本
planData.id = NEWID;
shoppingCart.addPlan（planData）;
shoppingCart.logCart（）;
newPlan.on（点击，函数（）{
//移除元素
$（这）一个.remove（）;
shoppingCart.removePlan（NEWID）;
的console.log（NEWID+ newid的）;
}）;
}
完成code座
$（文件）。就绪（函数（）{
//检查本地存储
//如果是创建计划，或功能车对象
//填充模式
变种cartIDcounter = 0;
VAR localStorageKey =vlocalstore234;
VAR购物车; 购物车= shoppingCartMaker（{}）; 如果（localStorage.getItem（localStorageKey））{
//抢cartModel，清除本地存储，calladdplan答addfeature在一个循环中创建HTMLS OBJ文件和数据OBJ
变种cartModel = JSON.parse（localStorage.getItem（localStorageKey））;
localStorage.removeItem（localStorageKey）;
//已保存的功能，并计划更新车
VAR我;
变种L = cartModel.plans.length;
VAR newPlan的;
VAR NEWID;
VAR planData;
VAR ID; 对于（i = 0; I＆LT;升;我++）{
的console.log（cartModel.plans [0]。名称）;
ID = cartModel.plans [0]。名称
$（#planView）.append（planCartObjects [ID]）;
newPlan的= $（本）.find（'＆GT;：最后一个孩子'）;
NEWID =cartObject+ cartIDcounter ++;
newPlan.attr（ID，NEWID）;
planData = $ .extend（真{} planDataObjects [ID]）; //使得数据对象的副本
planData.id = NEWID;
shoppingCart.addPlan（planData）;
shoppingCart.logCart（）;
newPlan.live（点击，函数（）{
//移除元素
$（这）一个.remove（）;
shoppingCart.removePlan（NEWID）;
的console.log（NEWID+ newid的）;
}）;
}
L = cartModel.features.length;
对于（i = 0; I＆LT;升;我++）{
的console.log（cartModel.features [我]。名称）;
ID = cartModel.features [我]。名称;
$（＃featureView）追加（featureCartObjects [ID]）;
newPlan的= $（本）.find（'＆GT;：最后一个孩子'）;
NEWID =cartObject+ cartIDcounter ++;
newPlan.attr（ID，NEWID）;
featureData = $ .extend（真{} featureDataObjects [ID]）;
featureData.id = NEWID;
shoppingCart.addFeature（featureData）;
shoppingCart.logCart（）;
newPlan.click（函数（）{
//删除视图和模型中删除
$（这）一个.remove（）;
shoppingCart.removeFeature（NEWID）;
的console.log（NEWID+ newid的）;
//从模型中取出 }）;
}
} //计划拖放
$（#myPlans跨度）.draggable（{
启动：函数（事件，UI）{}，
停止：函数（事件，UI）{
$（#chooser跨度）的.css（{'顶'：'0像素'，'左'：'0像素'}）;
}
}）;
$（#planView）.droppable（{
下降：函数（事件，UI）{
如果（ui.draggable.find（。planButton）。长度== 1）{
//做唯一的ID，ID添加到最后一个孩子，添加click事件最后一个孩子，增加计划，计划数据和ID建模
变种的id = ui.draggable [0] .ID; //我们使用id抢权车html和车数据
变种的id = id.substring（0，id.length-6）;
VAR newPlan的;
VAR NEWID;
VAR planData; $（本）.append（planCartObjects [ID]）;
newPlan的= $（本）.find（'＆GT;：最后一个孩子'）;
NEWID =cartObject+ cartIDcounter ++;
newPlan.attr（ID，NEWID）;
planData = $ .extend（真{} planDataObjects [ID]）; //使得数据对象的副本
planData.id = NEWID;
shoppingCart.addPlan（planData）;
shoppingCart.logCart（）;
newPlan.click（函数（）{
//移除元素
$（这）一个.remove（）;
shoppingCart.removePlan（NEWID）;
的console.log（NEWID+ newid的）;
}）;
}
}
}）; //功能拖放
$（＃addOnFeatures跨度）。拖动（{
启动：函数（事件，UI）{}，
停止：函数（事件，UI）{
$（＃addOnFeatures跨度），CSS（{'顶'：'0像素'，'左'：'0像素'}）;
}
}）;
$（＃featureView）。可弃（{
下降：函数（事件，UI）{
如果（ui.draggable.find（。featureButton）。长度== 1）{
变种的id = ui.draggable [0] .ID;
变种的id = id.substring（0，id.length-6）;
VAR newPlan的;
VAR NEWID;
VAR featureData;
VAR MYDATA; $（本）.append（featureCartObjects [ID]）;
newPlan的= $（本）.find（'＆GT;：最后一个孩子'）;
NEWID =cartObject+ cartIDcounter ++;
newPlan.attr（ID，NEWID）;
featureData = $ .extend（真{} featureDataObjects [ID]）;
featureData.id = NEWID;
shoppingCart.addFeature（featureData）;
shoppingCart.logCart（）;
newPlan.click（函数（）{
//删除视图和模型中删除
$（这）一个.remove（）;
shoppingCart.removeFeature（NEWID）;
的console.log（NEWID+ newid的）;
//从模型中取出 }）;
}
}
}）;
}）;
解决方案
我觉得你的问题在于你的选择之前，$（本）。是什么$（这）是指在。就绪（）范围是什么？
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?
这篇关于jQuery的单击事件不会开火动态创建的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
