Select2自動關閉WooCommerce中的點擊作爲變體自定義字段

Question

我試圖在WooCommerce 3.1.0的產品管理中使用Select2 4.0。

我添加了一個自定義字段的變化稱爲色組，就像這樣：

add_action('woocommerce_variation_options', 'add_to_variations_metabox', 10, 3); 
function add_to_variations_metabox($loop, $variation_data, $variation) { 

    <div> 
     <p class="form-row"> 
      <label for="dipi_color_groups<?php echo $loop; ?>"><?php echo __('Color Groups', 'dipi'); ?></label> 
       <select multiple="true" id="dipi_color_groups<?php echo $loop; ?>" class="color_groups" name="dipi_color_groups[<?php echo $loop; ?>]"> 
        <option>Red</option> 
        <option>Green</option> 
        <option>Blue</option> 
        <option>Beige</option> 
       </select> 
     </p> 
    </div> <?php 
} 

這裏是我的JS，使得選擇一個選擇二。

$('#variable_product_options_inner').on('click', '.woocommerce_variation', function(e) { 

     $("select.color_groups", $(this)).select2({ 
      tags: true, 
      placeholder: "Add color groups...", 
      width: "100%", 
      createTag: function (params) { 
       return { 
        id: params.term, 
        text: params.term, 
        newOption: true 
       } 
      } 
     }); 

    }); 

該字段顯示就好了。

但是，當我點擊它選擇二自動unfocuses /關閉。我認爲這與WooCommerce處理Select2有衝突，但我無法弄清楚如何在WC編輯產品中複製它們的功能。

這是怎麼回事？任何幫助非常感謝！

Answer 1

我想通了。問題在於我的單擊事件附加到任何單個變體包裝容器。點擊選擇2時，.woocommerce_variation點擊事件將觸發並重置選擇2 - 自動失去焦點。

因此，我將點擊事件的作用範圍限定在變體標題標題<h3>，並且僅在關閉時纔有效。此外，我檢查是否已應用Select2以避免浪費資源或重置元素。

$('#variable_product_options_inner').on('click', '.woocommerce_variation.closed h3', function(e) { 

    // get current ddl 
    $ddl = $("select.color_groups", $(this).parent()); 

    // already a select2? 
    if ($ddl.hasClass("select2-hidden-accessible")) return; // get out... 

    // select2-ify dropdown 
    $ddl.select2({ 
     tags: true, 
     placeholder: "Add color groups...", 
     width: "100%", 
     createTag: function (params) { 
      return { 
       id: params.term, 
       text: params.term, 
       newOption: true 
      } 
     } 
    }); 

});