动态创建的div上未触发jquery click事件

我在jqueryUI drop事件（DragTable的一部分）中动态创建的div上设置了一个click事件，click事件将删除该div。这很好。在document.ready的内部，我根据本地存储的数据做同样的事情。我可以创建动态div，但是click事件没有绑定，或者绑定丢失。我试过使用“点击”、“现场”和“打开”。我还删除了它所在的循环，并将其附加到第一个项目，当直接位于$（document）中时，这些循环都不起作用

这项工作：从Dropable绑定

$( "#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);
                    });
                }
            }

这不起作用-在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);
                    });
            }

$（文档）.ready（函数（）{
//检查本地存储
//如果是，则创建平面和/或要素购物车对象
//填充模型
var-cartIDcounter=0；
var localStorageKey=“vlocalstore234”；
购物车；
shoppingCart=shoppingCartMaker（{}）；
if（localStorage.getItem（localStorageKey））{
//抓取cartModel，清除本地存储，在循环中调用AddPlan和addfeature以创建htmls对象和数据对象
var cartModel=JSON.parse（localStorage.getItem（localStorageKey））；
removietem（localStorageKey）；
//使用保存的功能和计划更新购物车
var i；
var l=cartModel.plans.length；
新计划；
var newID；
var数据；
变量id；
对于（i=0；i必须在选择器上设置live event绑定，以便在动态创建新div时将其附加到click event。您正在执行$.find（），它将仅在当前元素内搜索，并将click event附加到找到的元素。解决此问题的方法是使用选择器上的“$.live（）”。
我认为您的问题在于选择器前面的$（this）。在.ready（）范围中，$（this）指的是什么？
这是您的问题

之所以
.on
起作用，是因为它将事件委托给已经存在的元素，例如文档、正文或某个静态父元素，这些元素在dom加载后未插入，并且该元素基于第一个参数（单击、模糊等）进行操作时，然后它将要求检查第二个参数是函数还是有效的选择器。

newPlan.on("click",function(){
    .... 
})

应该是

$someParentElement.on("click", '.newPlanSelector', function(){
    .... 
})

这是因为无法将事件绑定到不存在的元素。如果绑定一些事件，然后添加该元素，则所有事件都将为空。解决此问题的方法是绑定到静态元素。

newPlan.on("click",function(){
    .... 
})

由于事件从单击的元素中冒泡出来，向上通过DOM树，它们会在向上的过程中击中每个节点。此事件将包含源元素信息（class/id/etc）。现在，这很好，因为如果我们不确定该元素是否存在（或者即使我们尝试），我们无法准确地告诉该不存在的元素单击时该做什么但我们可以告诉这个对象的静态父对象，当它从指定的目标（列表项、链接等）接收到某种类型的事件（单击、模糊等）时，它将采取行动

活动授权是官方术语

狩猎快乐！：）

更新：另外，请确保不要将（$（this））用作A.A.post，这通常是一个问题。请使用$.proxy（function（）{}）并调用实际值

这.$someParent是一个很好的对象命名：）
this.someParent是错误的对象命名：）

只是一些随机的提示。不要期待一个被接受的答案。这一个：p
.live
不推荐使用，请使用
.on
或
。如果我使用了，代理
会有相同的结果。on”，“click”或“live”我的核心问题是为什么“code”newPlan=$（这个）。查找（'>:last child'）；newPlan.click（函数（）{…在拖动事件块中工作，但相同的代码在$（document）中的一级不工作。就绪（…谢谢，就是$（this）。查找（'>:last child'）；应该是$（“#planView”）。查找（'>:last child'）；非常感谢！解释得很好，事件委派是我的问题所在。