jQueryポップオーバーボタン（php）

Question

私はプレゼンテーションを生成するためのボタンがあります。ワンクリックで8つのプレゼンテーションを生成し、それぞれのプレゼンテーションを編集することができます。そこに私は別の小さな形を持っています。私はそこにいくつかのボタンも持っていたいので、編集したいフィールドを選ぶことができます。これは「場所」部分に適用されます。必要に応じて場所を指定することができます。私は、プレース版に接続されているフィールドを表示/非表示するボタンがあります。

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

次に、私のjQueryの部分では、このようなことが分かりました。それは本当に明らかに何か:)

$('.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(); 
    }); 
    }); 
}); 

ことしかし、代わりに私が欲しいものを得ることのできるので、私は、jQueryのには本当に新しいてることに注意してください、私はそのようなものを得る：

いいですね。しかし、それは動作しません。 「Dodaj nowe miejsce」（新しい場所を追加）をクリックしても何も起こりません。 Morover、他のプレゼンテーションでは、私はそのフォームの完全な多様性を得ています。いずれのボタンもまったく動作していませんが、一部のポップオーバーではボタンが全くなく、一部では機能しないものもあります。このような状況を引き起こす可能性がありますどのような

？

Answer 1

私がうまくいけば、8個のプレゼンテーションボタンごとに同じID #add-different-place-btnを使用しています。 これが正しい場合、コードは正常に動作しています。IDは一意である必要があります！ .btn-popover-linkのようにクラスセレクタに移動する必要があります。

また$('.btn-popover-link').on('click', function() {});を$(document).on("ready", function() { ... here ... });の内側に移動する必要があります。 $(window).on("load", function() {});でさらに良くなりますが、実行しているコードの種類によって異なります。