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?

    已采纳该答案
    打赏 评论

相关推荐 更多相似问题