Question

首先，我在php / html中创建按钮

<button class="accordionLic" id="<?php echo 'accordionClass'.$lic_num?>">#<?php echo $lic_num; ?></button>

我们可以称之为＆＃39;大按钮＆＃39;

当文档准备就绪时，脚本会启动，为此按钮创建内容（大按钮）+在其中创建另一个按钮（我们可以将其称为＆＃39;小按钮＆＃39;）

//...code...//
var text = (elem.innerHTML = accordionHeader[i] + 
'<span style="float:right;font-weight:bold;"><a href="?edit='+id[i]+'">
 <button class="btn btn-default">edit</button></a> '+(i+1)+'</span>') || "";

在输出中，这类似于：

<button class="big-button">
  <b>header</b>content

    <span style="float:right">
      <a href="?edit=5"> 
        <button id="small-button">edit</button>
      </a>
    </span>

</button>

问题是（在Firefox中）我无法点击small-button - 点击＆＃39;总是在这个大的。就像big-button在small-button前面一样。我试过了z-index，但它根本没有帮助。在Chrome中，这个问题不会发生。

Answer 1

这是因为它无效：不允许在按钮内嵌套交互式内容（如按钮）。这意味着您的大按钮不能是按钮元素。

尝试使用display：inline-block将大按钮设为span元素/ div元素;模拟类似的效果。当然，您可能还想添加一些自定义逻辑以使其感觉到一个按钮（悬停/焦点/ tabindex等），但这取决于您的需求。

另请参阅此答案，了解不允许嵌套在按钮内的概述：Can I nest button inside another button?

php / javascript按钮中的按钮在Firefox中不起作用

1 个答案: