顯示/隱藏彈出之間的對應關係

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

這可能是因爲它remebers我點擊「添加場所」按鈕，所以它藏了起來。但是這個代碼怎麼會出錯呢？我明白，每次點擊時，在下一次popover的每一次打開時，所有功能都可以執行，因此它們不會在不同的彈出窗口之間進行連接。我錯了嗎？我能做什麼？我想有每酥料餅單獨編輯，一個人可以在酥料餅一號添加不同的地方，但他決定不在酥料餅二號等

編輯：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完成。