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

Question

First of all, i'm creating button in php/html

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

We can call it 'big button'

When document is ready, script is firing up which is creating content for this button(big button) + creating another button in it ( we can call it 'small button')

//...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>') || "";

In output this is something like:

<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>

The problem is (in firefox) that i cannot click on the small-button- the 'click' is always on this big one. It's like the big-button is in front of the small-button. I tried z-index but it's not helping at all. In Chrome this problem doesn't occur.

Answer 1

That is because it is not valid: it is not allowed to nest interactive content (such as buttons) within a button. This means that your big button must not be a button element.

Try making your big button a span element / div element with display: inline-block; to simulate a similar effect. Of course, you might also want to add some custom logic to make it feel a button (hover / focus / tabindex et cetera), but that depends on your needs.

See also this answer for an overview what is not allowed to be nested within a button: Can I nest button inside another button?