調(diào)用innerHTML之后onclick失效問題的解決方法

2019-11-20 21:11:07

字體：大中小

供稿：網(wǎng)友

最近再寫一個(gè)項(xiàng)目，用到了innerHTML，但是呢，發(fā)現(xiàn)調(diào)用innerHTML之后，onclick失效了，這也是在意料之中的，因?yàn)閕nnerHTML是以文本形式插入的button，所以無法識(shí)別onclick事件，所我們只有另找出路了，我們不能直接實(shí)現(xiàn)，但是可以間接實(shí)現(xiàn)，下面就舉個(gè)例子：

例子一：該例子是無法實(shí)現(xiàn)的onclick的

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script defer> 
function insCell(th) 

var name=th.name; 
var id=th.id; 
if(name=="no"){ 
id.innerHTML="<input type='button' onclick='insCall(this)' value='上線' 
name='no' id='1'>"; 


}else{ 
id.innerHTML="<input type='button' onclick='insCall(this)' value='下線' 
name='yes' id='1'>"; 





} 
</script> 
</head> 
<body> 


<br /> 
<span id="msg"> 
<input type="button" onclick="insCall(this)" value="下線" name="yes" id="1"> 
</span> 
</body> 
</html> 

上面的例子是，根據(jù)button的name判斷是上線，還是下線~~~我們發(fā)現(xiàn)，當(dāng)點(diǎn)擊第一次之后，再點(diǎn)擊就無效了~~~~~~

這時(shí)候我們可以變相的實(shí)現(xiàn)，如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script defer> 
function insCell(th) 
{ 
var name=th.name; 
var id=th.id; 
alert(name+"--"+id); 
var span=document.getElementById(id); 
if(name=="no"){ 

span.innerHTML="<input type='button' value='下線'>"; 
span.name="yes"; 
}else{ 
span.innerHTML="<input type='button' value='上線'>"; 
span.name="no"; 
} 
} 
</script> 
</head> 
<body> 


<br /> 
<span id="1" onclick="insCell(this)" name="no"> 
<input type="button" value="上線"> 
</span> 
</body> 
</html> 