如何将jquery droppable绑定到动态创建的元素

Question

我在将可拖动功能附加到动态创建的元素时遇到了严重的麻烦。当创建该项目时，我无法绑定droppable，因为在某个元素被删除时会发生ajax调用！我怎样才能将可投入的功能绑定到动态元素上！

请回复！

可放开功能：

$('.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，则需要对它们初始化投掷的小部件。

创建一个将转成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'))