Jquery Droppable 添加实时事件答案

【问题标题】：Jquery Droppable add live eventJquery Droppable 添加实时事件
【发布时间】：2017-04-18 07:57:15
【问题描述】：

我有一个li，它是拖放功能，在刷新页面时工作，但是当我在列表中使用 AJAX 添加li 时，droppable 事件不会附加到它。如何将live 可丢弃事件附加到li。

这是我迄今为止尝试过的，

$('.main-menu.workspaces li').droppable({
  hoverClass: "ui-state-hover",
  tolerance: "pointer",
  accept: '.notification-item.subtask',
  drop: function (event, ui) {
    var workspace_id = $(event.target).data('workspace');
    var task_id = $(ui.draggable[0]).data('taskid');
    $.post('{{route('workspace.assign', $subdomain)}}', { 
      workspace: workspace_id, 
      task: task_id   
    }).done(function(data) {
    });
  }
});

【问题讨论】：

新内容添加到DOM后需要再次初始化droppable()
当我将li 添加到 DOM 时，我是否应该创建 droppable 的功能并重新调用它？
听起来好像可行
当然谢谢！！我会试一试的。

标签： jquery live droppable

【解决方案1】：

感谢@Rory McCrossan 的建议，这就是我所做的并且成功了。

(function($){
      var options = {
          hoverClass: "ui-state-hover",
          tolerance: "pointer",
          accept: '.notification-item.subtask',
          drop: function (event, ui) {
          var workspace_id = $(event.target).data('workspace');
              var task_id = $(ui.draggable[0]).data('taskid');
              var href = $('.notification-body.todotask').attr('data-assignlink');
              $.post(href,{workspace: workspace_id, task: task_id})
              .done(function(data){
                   //todo
               });
             }
           }

       $('.main-menu.workspaces li').droppable(options);


       // Attaching li to DOM using AJAX
       function attachLi(){
           $.ajax({
           url: 'store',
           method: 'POST',
           data: {
           task: searchString,
           },
           success: function (response) {
               //attaching li to DOM
               $('.task').append(response.html);

               //Reinitializing Droppable 
               $('.main-menu.workspaces li').droppable(options);
           }
          });
       }

      ...
      .
      .
})(jQuery);

【讨论】：