javascript - 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 部分，我想到了这样的事情。请注意，我是 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();
    });
  });
});

但是，我得到的不是我想要的，而是这样的:

看起来不错。但它不起作用。单击“Dodaj nowe miejsce”(添加新地点)没有任何反应。此外，在其他演示文稿中，我得到了各种各样的形式——下面的例子。所有按钮都不起作用，在一些弹出窗口中根本没有按钮，在一些弹出窗口中根本不起作用。

什么会导致这种情况？

Answer 1

如果我没弄错，您将对 8 个演示按钮中的每一个使用相同的 ID #add-different-place-btn。如果这是正确的，代码将按预期工作:IDs must be unique !您应该像使用 .btn-popover-link 一样移动到类选择器。

您还应该将 $('.btn-popover-link').on('click', function () {}); 移动到 $(document).on (“准备好”，函数(){ ... 这里 ... })；。$(window).on("load", function() {}); 效果更好，但这取决于您运行的代码类型。