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

Posted 2023-05-08

【中文标题】如何在 jquery 中动态创建事件处理程序

【英文标题】：How to create event handlers dynamically in 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 解决了这个问题

【参考方案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);