jQuery popover按钮（php）

Question

我有一个按钮来生成演示文稿。我只需点击一下即可生成8个演示文稿，然后我可以通过单击其名称来编辑每个演示文稿。我有另一种较小的形式。我想在那里也有一些按钮，这将让我选择我想要编辑的字段。这适用于＆＃34;地点＆＃34; part - 如果你愿意，你可以指定地点。我有一个按钮来显示/隐藏与地方版本相关的字段。

<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部分中，我发现了类似的东西。请注意，我对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();
    });
  });
});

但是，我没有得到我想要的东西，而是得到了类似的东西：

看起来不错。但它不起作用。点击＆＃34; Dodaj nowe miejsce＆＃34; （添加新地方）。 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() {});更好，但这取决于您运行的代码类型。