調用innerHTML之后onclick失效問題的解決方法

2019-11-20 21:11:07

字體：大中小

來源：轉載

供稿：網友

最近再寫一個項目，用到了innerHTML，但是呢，發現調用innerHTML之后，onclick失效了，這也是在意料之中的，因為innerHTML是以文本形式插入的button，所以無法識別onclick事件，所我們只有另找出路了，我們不能直接實現，但是可以間接實現，下面就舉個例子：

例子一：該例子是無法實現的onclick的

復制代碼代碼如下:

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

上面的例子是，根據button的name判斷是上線，還是下線~~~我們發現，當點擊第一次之后，再點擊就無效了~~~~~~

這時候我們可以變相的實現，如下：

復制代碼代碼如下:

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