Событие jquery click не запускается на динамически создаваемом div - PullRequest
0 голосов
/ 17 марта 2012

Я устанавливаю событие click для div, который динамически создается в событии отбрасывания jqueryUI (часть перетаскиваемого объекта), событие click удаляет div.Это отлично работает.Внутри документа. Я делаю то же самое, основываясь на данных из локального хранилища.Я могу создать динамические div, но событие click не привязывается, или привязка теряется.Я пытался использовать "нажмите", "вживую" и "на".Я также удалил цикл, в котором он находится и просто прикреплен к первому элементу, ни один из них не работает при непосредственном размещении в $ (document) .ready, но отлично работает, когда я устанавливаю событие click в выпадающем меню.

это работает: привязка из 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);
                    });
                }
            }

это не работает - вызывается один раз для документа .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);
                    });
            }

полный кодовый блок

    $(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

                    });
                }
            }
        });
    });

Ответы [ 3 ]

1 голос
/ 17 марта 2012

Я думаю, что ваша проблема связана с $ (this) перед вашим селектором. На что ссылается $ (this) в области .ready ()?

1 голос
/ 17 июня 2013

Вот твоя проблема.

Причина, по которой .on работает, заключается в том, что он делегирует события элементу, который уже существует , как, например,документ, тело или некоторый статический родительский элемент, не вставленный после загрузки dom, и когда на этот элемент воздействуют, основываясь на параметре FIRST (щелчок, размытие и т. д.), он попросит проверить, является ли Второй параметр является функцией или допустимым селектором .

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

должен быть

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

Этопотому что события не могут быть связаны с несуществующим элементом.Если вы связываете некоторые события, затем добавляете этот элемент, все события будут аннулированы.Чтобы обойти это, нужно связать статический элемент .

Поскольку события всплывают из элемента, по которому щелкнули, вверх через дерево DOM, они попадают в каждый узел на пути вверх.Это событие будет иметь информацию об исходных элементах (class / id / etc).Теперь, это хорошо, потому что мы не можем обязательно сказать элементу, который не существует, что делать, когда на него нажимают, если мы не уверены, что он существует (или даже если мы пытаемся), но мы МОЖЕМ сказать статическому родителю этого объекта:действовать, когда оно получает событие определенного типа (щелчок, размытие и т. д.) от указанной цели (элемент списка, ссылка и т. д.).

Делегирование события является официальным термином.

Удачной охоты! :)

Обновление: Кроме того, убедитесь, что вы не используете ($ (это)) в качестве публикации AA, это часто проблема.Используйте $ .proxy (function () {}) и вызовите значения REAL.

this. $ SomeParent - хорошее именование объектов :) this.someParent - неправильное именование объектов:)

Просто несколько случайныхчаевые.Не ожидайте принятого ответа от этого: P

0 голосов
/ 17 марта 2012

Привязка к текущему событию должна быть установлена ​​на селекторе, чтобы его можно было присоединить к событию щелчка при динамическом создании нового div. Вы делаете $ .find (), который будет искать только в текущем элементе, и присоединяете событие click к найденным элементам. Решением вашей проблемы было бы прикрепить событие click с помощью «$ .live ()» к селектору.

...