douyinglan2599
2017-07-14 00:51
浏览 34
已采纳

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

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.

图片转代码服务由CSDN问答提供 功能建议

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

  ＆lt; button class =“accordionLic”id =“＆lt;？php echo' accordionClass'。$ lic_num？＆gt;”＆gt;＃＆lt;？php echo $ lic_num;  ？＆gt;＆lt; / button＆gt; 
   
 
 
我们可以将其称为“大按钮” 
 
 
文档准备好后，脚本 正在启动，正在为此按钮创建内容（大按钮）+在其中创建另一个按钮（我们可以将其称为'小按钮'） 
 
 
  // ... code  ... // 
var text =（elem.innerHTML = accordionHeader [i] + 
'＆lt; span style =“float：right; font-weight：bold;”＆gt;＆lt; a href =“？edit =  '+ id [i] +'“＆gt; 
＆lt; button class =”btn btn-default“＆gt; edit＆lt; / button＆gt;＆lt; / a＆gt;'+（i + 1）+'＆lt; / span＆gt;  '）||  “”; 
   
 
 
在输出中，这类似于： 
 
 
 ＆lt; button class =“big-button  “＆gt; 
＆lt; b＆gt;标题＆lt; / b＆gt;内容
 
＆lt; span style =”float：right“＆gt; 
＆lt; a href =”？edit = 5“＆gt;  
＆lt; button id =“small-button”＆gt; edit＆lt; / button＆gt; 
＆lt; / a＆gt; 
＆lt; / span＆gt; 
 
＆lt; / button＆gt; 
   
 
 
问题是（在firefox中）我无法点击小按钮  - 'click'总是在这个大的。 这就像 big-button 在小按钮前面。 我尝试了 z-index ，但它根本没有帮助。  
在Chrome中，不会出现此问题。
  • 写回答
  • 赞 踩
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dragon0118 2017-07-14 01:00
    已采纳

    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?

    已采纳该答案
    赞 踩 打赏 评论

报告相同问题？

提交

相关推荐 更多相似问题