javascript - 如何将 jquery droppable 绑定(bind)到动态创建的元素

Question

我在将可放置功能附加到动态创建的元素时遇到了严重的麻烦。!创建项目时我无法绑定(bind) droppable，因为当某个元素被删除时会有一个 ajax 调用!如何将可放置功能绑定(bind)到动态元素!

请回复!

可放置函数:

$('.bill-item-list').droppable({
                    accept: '.item',
                    drop: function( event, ui ) {
                        var clone = bill.clone();
                        var droppable = $(this);
                        var jsonObject = 'itemId=' + ui.draggable.attr('id') + '&billId=' + $(this).parent().attr('id');
                        $.ajax({
                            url: "/addItemToBill",
                            type: "POST",
                            data: jsonObject,
                            dataType: "json",
                            beforeSend: function(x) {
                                if(x && x.overrideMimeType) {
                                    x.overrideMimeType("application/json;charset=UTF-8");
                                }
                            },
                            success: function(result){
                                if(result.status = true){
                                    clone.find('.bill-item-name-left').html(ui.draggable.find('.item-name').children('h4').html());
                                    clone.find('.bill-item-name-right').html(ui.draggable.find('.item-price').children('h4').html());
                                    clone.find('.bill-item-price').html(ui.draggable.find('.item-price').children('h4').html() + ".00 USD" );
                                    clone.find('.bill-item-amount').html("1");
                                    if(droppable.height() > 300){
                                        droppable.css('overflow-y','scroll');
                                        droppable.css('height', '320px')
                                    }
                                    clone.draggable({
                                        revert : true,
                                        zIndex: 1,
                                        containment: "window",
                                        opacity: 0.5,
                                        cursor: "move",
                                        helper: function() { return $(this).clone().appendTo('body').show(); }
                                    });
                                    clone.insertBefore(droppable.find('.item-drop-point')).hide().fadeIn("slow");
                                }

                            }
                        });
                    }
                });

以及动态元素的创建

function getBillInformation(Status,billingDate,User){
    var parent = "";
    var status = "";

    switch(Status){
        case "OPEN":
            parent = $('#tab-1');
            status = "O";
            break;
        case "SETTLED":
            parent = $('#tab-2');
            status = "S";
            break;
        case "CANCEL":
            parent = $('#tab-3');
            status = "C";
            break;
    }

    var billList = parent.find('#bill-list').first();
    var bill = parent.find('.bill').first();
    var billItemList = parent.find('.bill-item-list').first();
    var billItem = parent.find('.bill-item').first();
    var billPanel = parent.find('#bill-panel').first();

    var jsonObject = "billStatus=" + status + "&billingDate=" + billingDate + "&user=" + User;

    ajaxCall("/getBillingInformation","POST",jsonObject,function(response){
        billPanel.empty();

        billItemList.find('.bill-item').each(function(){
            $(this).remove();
        })

        for(var i = 0; i < response.bills.length; i++){
            var clone = bill.clone();
            clone.attr('id', response.bills[i].billId);
            clone.find('.bill-number').html(response.bills[i].billNo);
            clone.find('.amount').html(response.bills[i].billTotal + " USD");

            clone.find('.room-number').html(response.bills[i].roomNo);
            clone.find('.table-name').html(response.bills[i].tableNo);


            if(response.bills[i].itemsList.length != 0){
                for(var j = 0; j < response.bills[i].itemsList.length; j++){
                    var billItemClone = billItem.clone();
                    billItemClone.find('.bill-item-name-right').html(response.bills[i].itemsList[j].amount);
                    billItemClone.find('.bill-item-amount').html(response.bills[i].itemsList[j].qty);
                    var total = (response.bills[i].itemsList[j].amount) * (response.bills[i].itemsList[j].qty);
                    billItemClone.find('.bill-item-price').html(total + ".00 USD");
                    billItemClone.draggable({
                        revert : true,
                        zIndex: 1,
                        containment: "window",
                        opacity: 0.5,
                        cursor: "move",
                        helper: function() { return $(this).clone().appendTo('body').show(); }
                    });
                    clone.find('.bill-item-list').prepend(billItemClone);
                }
            }

            billPanel.prepend(clone);
        }
    });

}

Answer 1

将元素添加到 dom 后，您需要在其上初始化 droppable widget。

创建一个函数，将 bill-item-list 变成可放置的

function billItemDroppable(els){
    els.droppable({
        accept: '.item',
        drop: function( event, ui ) {
            var clone = bill.clone();
            var droppable = $(this);
            var jsonObject = 'itemId=' + ui.draggable.attr('id') + '&billId=' + $(this).parent().attr('id');
            $.ajax({
                url: "/addItemToBill",
                type: "POST",
                data: jsonObject,
                dataType: "json",
                beforeSend: function(x) {
                    if(x && x.overrideMimeType) {
                        x.overrideMimeType("application/json;charset=UTF-8");
                    }
                },
                success: function(result){
                    if(result.status = true){
                        clone.find('.bill-item-name-left').html(ui.draggable.find('.item-name').children('h4').html());
                        clone.find('.bill-item-name-right').html(ui.draggable.find('.item-price').children('h4').html());
                        clone.find('.bill-item-price').html(ui.draggable.find('.item-price').children('h4').html() + ".00 USD" );
                        clone.find('.bill-item-amount').html("1");
                        if(droppable.height() > 300){
                            droppable.css('overflow-y','scroll');
                            droppable.css('height', '320px')
                        }
                        clone.draggable({
                            revert : true,
                            zIndex: 1,
                            containment: "window",
                            opacity: 0.5,
                            cursor: "move",
                            helper: function() { return $(this).clone().appendTo('body').show(); }
                        });
                        clone.insertBefore(droppable.find('.item-drop-point')).hide().fadeIn("slow");
                    }

                }
            });
        }
    });
}

然后调用

billItemDroppable($('.bill-item-list'))

然后一旦创建了动态项

billPanel.prepend(clone);
billItemDroppable(clone.find('.bill-item-list'))