1

テキスト フィールドに名前を入力し、必要に応じてチェックボックスを切り替えることで、ユーザーが配送タイプを作成できるフォームがあります。別の配送タイプを追加するには、jQuery の clone メソッドを使用してフィールドを 1 回以上再構築します。

私の目標は、bootstrap-toggle を使用してチェックボックスをトグルに変更することです。これは最初のトグルでは問題なく機能しますが、後続の複製されたフィールドのセットは失敗します。

これを無駄に機能させるために、最初のコードを最も基本的な例に落とし込みました。

<div id="shipping_fields" class='shipping_fields'>
    <input id="shippings_hide_1" name="shippings1[hide][]" type="checkbox" value="0" data-toggle="toggle" class="hidden">
</div>
<span class='go indent padbot instruction clear'><a href="#" id="add_shipping_button"><i class='fa fa-plus-circle'></i> Add Another Shipping Option</a></span>

<script type="text/javascript">
  function addShippingToPage(event) {
    event.preventDefault();
    $('#shipping_fields').clone().show().
      removeAttr('id').
      insertAfter('.shipping_fields:last')
  }
  function removeShippingFields() {
    $('#shipping_fields_template').remove()
  }
  jQuery("#add_shipping_button").click(addShippingToPage);
  jQuery("#new_event").submit(removeShippingFields);
</script>

Bootstap-toggle は、ページの読み込み時にチェックボックスを次のように変換し、トグルは正常に機能します。

<div id="shipping_fields" class="shipping_fields">
    <div class="toggle btn btn-default off" data-toggle="toggle" style="width: 58px; height: 34px;">
        <input id="shippings_hide_" name="shippings[hide][]" type="checkbox" value="0" data-toggle="toggle" class="hidden">
        <div class="toggle-group">
            <label class="btn btn-primary toggle-on">On</label>
            <label class="btn btn-default active toggle-off">Off</label>
            <span class="toggle-handle btn btn-default"></span>
        </div>
    </div>
</div>

addShippingToPage 関数を使用して別のフィールドを追加すると、複製された HTML はまったく同じように見えます。ただし、ボタンを切り替えようとすると、最初の開始 div 内に前の bootstrap-toggle コードの完全なコピーが作成され、もちろんトグルは移動できません。

クローンを使用しても単に失敗するBoostrap-switchを試したり、クラスとIDの名前を変更して差別化を確実にするなど、考えられるすべてを試しましたが、これを機能させることはできません。任意のガイダンスをいただければ幸いです。

4

1 に答える 1

1

問題は、Bootstrap が既存のコード内に新しい「bootstrap-toggle」コードを生成していることです。divしたがって、 「bootstrap-toggle」コードを使用せずにクローンを作成し、jquery を介して追加する必要があります。

入力は通常のチェックボックス (なしdata-toggle="toggle")である必要があります。

<input id="shippings_hide_1" name="shippings1[hide][]" type="checkbox" value="0" class="hidden">

そして、addShippingToPage関数は「bootstrap-toggle」コードを新しいチェックボックスにもたらすはずです。

function addShippingToPage(event) {
  event.preventDefault();
  $('#shipping_fields').clone().show().
     removeAttr('id').
     insertAfter('.shipping_fields:last');
  $("input:last").bootstrapToggle(); // This will add "bootstrap-toggle" only to the last checkbox.
}
于 2015-06-16T19:15:16.410 に答える