0

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.

Kafus
  • 101
  • 10

1 Answers1

3

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?

Zomry
  • 1,141
  • 12
  • 14
  • Hmm. That's interesting. But why only in firefox problem occur? I hate firefox :) – Kafus Jul 14 '17 at 01:04
  • @Kafus Because other browsers decided to be lenient, even though it's not required. – Barmar Jul 14 '17 at 01:07
  • This is because different browsers have different implementations. Some might be more strict about following the specs (as they should), while some tend to be more "flexible". I, personally, like it better when browsers are a bit stricter. That way you find issues faster while developing. – Zomry Jul 14 '17 at 01:09