ポップオーバー間の対応を表示/非表示

Question

ポップオーバーを生成するボタンがいくつかあります。彼らのクラスは.btn-popover-linkです。クリックすると、新しいフォームが表示されます。 「別の場所を追加」ボタンもあります。私がクリックすると、いくつかのフィールドがいっぱいになり、「この場所を削除」をクリックすると、再び非表示になります。最初の場所に新しい場所を追加してから次の場所に移動すると、「別の場所を追加する」ボタンが表示されません。実際にはボタンは一切表示されません。

$('.btn-popover-link').on('click', function() { 
    $(document).ready(function() { 
     $('.place-hidden-different').hide(); 
     $('.delete-different-place-btn').hide(); 

     $('.add-different-place-btn').on('click', function() { 
      $('.place-hidden-different').show(); 
      $('.add-different-place-btn').hide(); 
      $('.delete-different-place-btn').show(); 
     }); 

     $('.delete-different-place-btn').on('click', function() { 
      $('.place-hidden-different').hide(); 
      $('.add-different-place-btn').show(); 
      $('.delete-different-place-btn').hide(); 
     }); 
    }); 
}); 

これはおそらく、「場所を追加」ボタンをクリックしたことを記憶しているためです。しかし、このコードはどうやって間違っていますか？私は、クリックごとに、次のポップオーバーが開くたびに、すべての機能が実行できることを理解しています。したがって、異なるポップオーバーの間には接続されていません。私が間違っている？私に何ができる？私は、人はポップオーバーの1番に別の場所を追加することができ、すべてのポップオーバーは個別に編集したいが、彼はポップオーバーの2番でなどに

EDITないことを決定した。その一部のHTML：

を

<div> 
         <?= 
         Html::button(Yii::t('app', 'Add new place'), [ 
          // 'id' => "add-different-place-btn", 
          'class' => 'btn btn-success add-different-place-btn', 
         ]) 
         ?> 
         <?= 
         Html::button(Yii::t('app', 'Delete new place'), [ 
         // 'id' => "delete-different-place-btn", 
          'class' => 'btn btn-success delete-different-place-btn', 
         ]) 
         ?> 
        </div> 
        <br /> 
        <div class="place-hidden-different"> 
         <div class="place-name-hidden-2"> 
          <?= $form->field($place, "[{$index}]name")->textInput()->label(Yii::t('app', 'New place')) ?> 
         </div> 
         <div class="place-city-hidden-2"> 
          <?= $form->field($place, "[{$index}]city")->textInput() ?> 
         </div> 
         <div class="place-street-hidden-2"> 
          <?= $form->field($place, "[{$index}]street")->textInput() ?> 
         </div> 
         <div class="place-postcode-hidden-2"> 
          <?= $form->field($place, "[{$index}]post_code")->textInput() ?> 
         </div> 
        </div> 

Answer 1

イベント内に準備完了機能を使用することはできませんイベント内に準備完了機能を使用することはできません。イベント委譲on()を使用して動的に追加された新しい要素を処理し、$(this)をクリックして、あなたのコードは動作するはずです：

$(document).ready(function() { 
    $('body').on('click', '.btn-popover-link', function() { 
     $('.place-hidden-different').hide(); 
     $('.delete-different-place-btn').hide(); 
    }); 

    $('body').on('click', '.add-different-place-btn', function() { 
     $(this).hide(); 

     $('.place-hidden-different').show(); 
     $('.delete-different-place-btn').show(); 
    }); 

    $('body').on('click', '.delete-different-place-btn', function() { 
     $(this).hide(); 

     $('.place-hidden-different').hide(); 
     $('.add-different-place-btn').show(); 
    }); 
}); 

希望します。

Answer 2

Zakaria Acharkiのanswerがほとんどあなたのところにいました。あなたが必要とする最後の部分は、すべてのボタンと場所を非表示にするのではなく、関連するボタンだけを隠すことです。私は、あなたの質問のHTMLが何度も繰り返されていると仮定しています。たとえば、divには、places-containerのようなクラスも指定したとしましょう。次に、同じ容器内でのみ.place-hidden-differentと.add-different-place-btnを次のようにターゲティングできます。

$(function() { 
    $('body') 
    .on('click', '.btn-popover-link', function() { 
     var $container = $(this).closest('.places-container'); 
     $container.find('.place-hidden-different').hide(); 
     $container.find('.delete-different-place-btn').hide(); 
    }) 
    .on('click', '.add-different-place-btn', function() { 
     $(this).hide(); 

     var $container = $(this).closest('.places-container'); 
     $container.find('.place-hidden-different').show(); 
     $container.find('.delete-different-place-btn').show(); 
    }) 
    .on('click', '.delete-different-place-btn', function() { 
     $(this).hide(); 

     var $container = $(this).closest('.places-container'); 
     $container.find('.place-hidden-different').hide(); 
     $container.find('.add-different-place-btn').show(); 
    }); 
}); 

ここで重要な部分ではなく、クラスplace-hidden-differentを持つすべての要素を選択するので、私たちはコンテナにそれらを選択、ということです。コンテナは.closestを使用して見つけられ、次にそのコンテナで検索するのは.findを使用して行われます。