如何在 jquery 中动态创建事件处理程序答案

【问题标题】：How to create event handlers dynamically in jquery如何在 jquery 中动态创建事件处理程序
【发布时间】：2019-01-03 13:16:26
【问题描述】：

我有一个可拖动的表，我正在尝试为其拖动一个 tr，并且我想将它拖放到其中一个可放置的表中。代码按预期工作，但我想让这段代码动态。怎么可能？这是我的代码

jQuery('#pipeline_lead_card_table_1').droppable({ 
   tolerance: 'pointer',
   drop: function(event, ui) {   
    jQuery('#pipeline_lead_card_table_1 .pipeline_lead_card_table      
    tbody').append(ui.helper.children());
  }
}); 

jQuery('#pipeline_lead_card_table_2').droppable({ 
  tolerance: 'pointer',
  drop: function(event, ui) {   
    jQuery('#pipeline_lead_card_table_2 .pipeline_lead_card_table    
    tbody').append(ui.helper.children());
  }
}); 

jQuery('#pipeline_lead_card_table_3').droppable({ 
  tolerance: 'pointer',
  drop: function(event, ui) {   
    jQuery('#pipeline_lead_card_table_3 .pipeline_lead_card_table 
      body').append(ui.helper.children());
     }
  }); 

 jQuery('#pipeline_lead_card_table_4').droppable({ 
   tolerance: 'pointer',
   drop: function(event, ui) {   
     jQuery('#pipeline_lead_card_table_4 .pipeline_lead_card_table     
       tbody').append(ui.helper.children());
      }
  });

我想让这段代码动态，因为我不知道动态生成多少表。

【问题讨论】：

建议从 ID 选择器切换到类选择器。这样您就可以进行更多动态调用。您还可以考虑创建将 Drag n Drop 应用于传递的元素的函数。通过这种方式，您可以创建动态元素，然后初始化它们以进行拖放。
感谢您的回复。我已经尝试过使用类选择器并尝试过您提供的代码。使用类选择器的问题是它只考虑第一个 droppble 元素来删除元素。
我已经通过对所有可放置元素使用.each 解决了这个问题

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

扩展我的评论，您可以像这样简化代码：

(function($) {

  function makeDrop($o) {
    $o.droppable({
      tolorance: "pointer",
      drop: function(e, ui) {
        $(".pipeline_lead_card_table tbody", this).append(ui.helper.children());
      }
    });
  }

  makeDrop($('#pipeline_lead_card_table_1'));
  makeDrop($('#pipeline_lead_card_table_2'));
  makeDrop($('#pipeline_lead_card_table_3'));
  makeDrop($('#pipeline_lead_card_table_4'));
})(jQuery);

不，如果您的每个表都有一个 Class 属性，例如：can-change，您可以进一步简化代码：

(function($) {

  function makeDrop($o) {
    $o.droppable({
      tolorance: "pointer",
      drop: function(e, ui) {
        $(".pipeline_lead_card_table tbody", this).append(ui.helper.children());
      }
    });
  }

  makeDrop($('.can-change'));
})(jQuery);

【讨论】：